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

packages/react/src/Link.ts

@@ -7,12 +7,12 @@ import {
   router,
   shouldIntercept,
 } from '@inertiajs/core'
-import { createElement, forwardRef, useCallback } from 'react'
+import React, { ElementType, createElement, forwardRef, useCallback } from 'react'
 
 const noop = () => undefined
 
 interface BaseInertiaLinkProps {
-  as?: string
+  as?: string | ElementType
   data?: Record<string, FormDataConvertible>
   href: string
   method?: Method
@@ -115,13 +115,13 @@ const Link = forwardRef<unknown, InertiaLinkProps>(
       ],
     )
 
-    as = as.toLowerCase()
+    const isAnchor = as === 'a' || as === 'A'
     method = method.toLowerCase() as Method
     const [_href, _data] = mergeDataIntoQueryString(method, href || '', data, queryStringArrayFormat)
     href = _href
     data = _data
 
-    if (as === 'a' && method !== 'get') {
+    if (isAnchor && method !== 'get') {
       console.warn(
         `Creating POST/PUT/PATCH/DELETE <a> links is discouraged as it causes "Open Link in New Tab/Window" accessibility issues.\n\nPlease specify a more appropriate element using the "as" attribute. For example:\n\n<Link href="${href}" method="${method}" as="button">...</Link>`,
       )
@@ -131,7 +131,7 @@ const Link = forwardRef<unknown, InertiaLinkProps>(
       as,
       {
         ...props,
-        ...(as === 'a' ? { href } : {}),
+        ...(isAnchor ? { href } : {}),
         ref,
         onClick: visit,
       },

packages/vue2/src/link.ts

@@ -7,10 +7,10 @@ import {
   router,
   shouldIntercept,
 } from '@inertiajs/core'
-import { FunctionalComponentOptions, PropType } from 'vue'
+import { Component, FunctionalComponentOptions, PropType } from 'vue'
 
 export interface InertiaLinkProps {
-  as?: string
+  as?: string | Component
   data?: Record<string, FormDataConvertible>
   href: string
   method?: Method
@@ -37,7 +37,7 @@ const Link: InertiaLink = {
   functional: true,
   props: {
     as: {
-      type: String,
+      type: [String, Object] as PropType<string | Component>,
       default: 'a',
     },
     data: {
@@ -93,7 +93,7 @@ const Link: InertiaLink = {
       ...(data.on || {}),
     }
 
-    const as = props.as.toLowerCase()
+    const isAnchor = props.as === 'a' || props.as === 'A'
     const method = props.method.toLowerCase() as Method
     const [href, propsData] = mergeDataIntoQueryString(
       method,
@@ -102,7 +102,7 @@ const Link: InertiaLink = {
       props.queryStringArrayFormat,
     )
 
-    if (as === 'a' && method !== 'get') {
+    if (isAnchor && method !== 'get') {
       console.warn(
         `Creating POST/PUT/PATCH/DELETE <a> links is discouraged as it causes "Open Link in New Tab/Window" accessibility issues.\n\nPlease specify a more appropriate element using the "as" attribute. For example:\n\n<Link href="${href}" method="${method}" as="button">...</Link>`,
       )
@@ -114,7 +114,7 @@ const Link: InertiaLink = {
         ...data,
         attrs: {
           ...data.attrs,
-          ...(as === 'a' ? { href } : {}),
+          ...(isAnchor ? { href } : {}),
         },
         on: {
           ...data.on,
@@ -159,4 +159,4 @@ const Link: InertiaLink = {
     )
   },
 }
-export default Link
+export default Link

packages/vue3/src/link.ts

@@ -1,8 +1,8 @@
 import { mergeDataIntoQueryString, Method, PageProps, Progress, router, shouldIntercept } from '@inertiajs/core'
-import { defineComponent, DefineComponent, h, PropType } from 'vue'
+import { Component, defineComponent, DefineComponent, h, PropType } from 'vue'
 
 export interface InertiaLinkProps {
-  as?: string
+  as?: string | Component
   data?: object
   href: string
   method?: Method
@@ -29,7 +29,7 @@ const Link: InertiaLink = defineComponent({
   name: 'Link',
   props: {
     as: {
-      type: String,
+      type: [String, Object] as PropType<string | Component>,
       default: 'a',
     },
     data: {
@@ -75,11 +75,11 @@ const Link: InertiaLink = defineComponent({
   },
   setup(props, { slots, attrs }) {
     return () => {
-      const as = props.as.toLowerCase()
+      const isAnchor = props.as === 'a' || props.as === 'A'
       const method = props.method.toLowerCase() as Method
       const [href, data] = mergeDataIntoQueryString(method, props.href || '', props.data, props.queryStringArrayFormat)
 
-      if (as === 'a' && method !== 'get') {
+      if (isAnchor && method !== 'get') {
         console.warn(
           `Creating POST/PUT/PATCH/DELETE <a> links is discouraged as it causes "Open Link in New Tab/Window" accessibility issues.\n\nPlease specify a more appropriate element using the "as" attribute. For example:\n\n<Link href="${href}" method="${method}" as="button">...</Link>`,
         )
@@ -89,7 +89,7 @@ const Link: InertiaLink = defineComponent({
         props.as,
         {
           ...attrs,
-          ...(as === 'a' ? { href } : {}),
+          ...(isAnchor ? { href } : {}),
           onClick: (event) => {
             if (shouldIntercept(event)) {
               event.preventDefault()