inertia
inertia copied to clipboard
[2.x] Allow custom component on Link "as" prop in React, Vue2 and Vue3
This PR adds the ability to use a custom component in the as prop of the Link component. Currently it only accepts a string value. The proposed changes would allow to use the link as:
- Vue 3
<script setup>
import { Link } from '@inertiajs/vue3';
import CustomComponent from '../Components/CustomComponent.vue';
</script>
<template>
<div>
<Link href="/article" :as="CustomComponent">
Custom Component Link
</Link>
<Link href="/article" as="button">
HTML Tag Link (button)
</Link>
</div>
</template>
- Vue 2
<script setup>
import { Link } from '@inertiajs/vue2';
import CustomComponent from '../Components/CustomComponent.vue';
</script>
<template>
<div>
<Link href="/article" :as="CustomComponent">
Custom Component Link
</Link>
<Link href="/article" as="button">
HTML Tag Link (button)
</Link>
</div>
</template>
Because Link is a Functional Component it is necessary to manually pass attributes and listeners in the CustomComponent - https://v2.vuejs.org/v2/guide/render-function#Passing-Attributes-and-Events-to-Child-Elements-Components.
- React
import { Link } from '@inertiajs/react';
import CustomComponent from '../Components/CustomComponent';
const Home = () => {
return (
<>
<Link href="/article">
HTML Tag Link (button)
</Link>
<Link href="/article" as={CustomComponent}>
Custom Component Link
</Link>
</>
);
};
export default Home;
This feature was requested in #1550, #1654, #1668 and #1746.