inertia icon indicating copy to clipboard operation
inertia copied to clipboard

[2.x] Allow custom component on Link "as" prop in React, Vue2 and Vue3

Open guizoxxv opened this issue 1 year ago • 12 comments

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.

guizoxxv avatar Aug 11 '24 06:08 guizoxxv