Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

NickSmithTech's avatar

Inertia-Link Not Working

So Jeffrey has sold me on the idea of an SPA being the best of both worlds.

Now, I am supposed to be able to link the pages together with

<inertia-link href="/contact">Go to the Contact Page</inertia-link>

but I get

[Vue warn]: Unknown custom element: <inertia-link> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

in the browser console and just the text...it isn't a link.

Further research indicates maybe the way links work has changed (because, you know, why not...that isn't scary) and that I should import and use "Link" per https://inertiajs.com/links.

So I add

import { Link } from '@inertiajs/inertia-vue'

to my app.js file and try:

<Link href="/contact">Go to the Contact Page</Link>

and now the browser console error is gone, but there is no link on the page (like it is literally display:none...if i change to display:block it isn't a link).

I'm getting a little concerned that if I'm having this much trouble with something simple like a link that maybe Inertia isn't really ready yet.

Help?

PS Why no "Inertia" discussion channel?

0 likes
13 replies
Erwin_nl's avatar

Add this to your app.js:

import { createInertiaApp, Head, Link } from '@inertiajs/inertia-vue3';

and then this:

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => require(`./Pages/${name}.vue`),
    setup({ el, app, props, plugin }) {
        return createApp({ render: () => h(app, props) })
            .use(plugin)
            .use( CKEditor )
            .component('InertiaHead', Head)
            .component('InertiaLink', Link)
            .mixin({ methods: { route } })
            .mount(el);
    },
});
3 likes
BluKoffee's avatar

@Erwin_nl Thank you for your answer :) It is the answer that helped me solve the problem the most. However, it is important to mention that you have to use the same name (inside your Vue component) that you registered the Link or Head component with in the createInertiaApp .

So if you named them like this:

.component('InertiaHead', Head)
.component('InertiaLink', Link)

your Vue component should look like this:

<template>
    <h1>Home</h1>
    <nav>
        <ul>
            <li><InertiaLink href="/">Home</Link></li>
            <li><InertiaLink href="/users">Users</Link></li>
            <li><InertiaLink href="/settings">Settings</Link></li>
        </ul>
    </nav>
</template>

I personally prefer to name the Inertia Link component simply Link inside my vue component. Like the following:

<template>
    <h1>Home</h1>
    <nav>
        <ul>
            <li><Link href="/">Home</Link></li>
            <li><Link href="/users">Users</Link></li>
            <li><Link href="/settings">Settings</Link></li>
        </ul>
    </nav>
</template>

So I must register them inside like so:

.component('Head', Head)
.component('Link', Link)

Note: actually registering the Inertia component with in the createInertiaApp . Is a solution for reducing the boilerplate code of importing and exporting the Inertia component in every vue component like the following:

<script>
import { Link } from '@inertiajs/vue3'

export default {
    name: "Home.vue",
    components: {
        Link,
    },
}
</script>

So in order to be able to use the Inertia Link component (and in order for it to display correctly ) you must import it and export it as a component.

PS: i am using

"@inertiajs/vue3": "^1.0.8",
"@vitejs/plugin-vue": "^4.2.3",
"vue": "^3.3.4"
1 like
NickSmithTech's avatar

I was originally using vue2. I went ahead and installed vue3, added the suggested code from the Inertia docs and then added what you supplied. The first funny thing I get is these warnings from mix, though it does compile:

WARNING in ./resources/js/app.js 15:11-20
export 'createApp' (imported as 'createApp') was not found in 'vue' (possible exports: default)

WARNING in ./resources/js/app.js 17:15-16
export 'h' (imported as 'h') was not found in 'vue' (possible exports: default)

Those warnings disappear if I remove:

import { createApp, h } from 'vue'

But regardless of whether the above line is present or not, I still get the following error in the console and the test page does not load now:

app.js:10 Uncaught TypeError: t.ref is not a function
    at Object../node_modules/@inertiajs/inertia-vue3/dist/index.js

This is app.js:

import { createApp, h } from 'vue'
import { createInertiaApp, Head, Link } from '@inertiajs/inertia-vue3'

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => require(`./Pages/${name}.vue`),
    setup({ el, app, props, plugin }) {
        return createApp({ render: () => h(app, props) })
            .use(plugin)
            .use( CKEditor )
            .component('InertiaHead', Head)
            .component('InertiaLink', Link)
            .mixin({ methods: { route } })
            .mount(el);
    },
});

This is this stupid simple Hello.vue page:

<template>
    <div>
        <div class="container m-4">
            This is my Hello Page.
        </div>
        <div>
            <inertia-link href="/contact">This is my link</inertia-link>
        </div>

    </div>

</template>

<script>
export default {
    name: "Hello"
}


</script>

<style scoped>

</style>
Erwin_nl's avatar

Are you sure you are running the right Vue version? (npm list vue)

NickSmithTech's avatar

At this point I'm not sure of anything lol

`-- UNMET PEER DEPENDENCY [email protected]

npm ERR! peer dep missing: vue@^3.0.0, required by @inertiajs/[email protected]

I assume package.json behaves like composer.json in that if you remove things from it and run npm install the system will match what is in it? Maybe you can share a copy of what you have with me?

Randy_Johnson's avatar

@NickSmithTech did you download vue? When following the tutorial, I think you have to download vue by npm which isn't displayed on the website.

ixmail's avatar

I had this issue and it almost made me crazy. This is how I figured it out. is a custom link and Vue tries to find if it corresponds to a registered component. If Vue does not find the commponent it flags the warning Here is what you need to do to resolve this issue.

Import Link from Vue adapter of Inertia like this in your app.js

import { Link } from '@inertiajs/inertia-vue'

Register the Link as a component with Vue after you have imported both Vue and Link like this in your same app.js

Vue.component('inertia-link', Link)

Try in your templates and should work fine.

PS:- I was using Vue2

2 likes
tuesdave's avatar

@nicksmithtech were you able to figure out how to fix the

app.js:26214 Uncaught TypeError: t.ref is not a function

error?

Sinnbeck's avatar

@tuesdave feel free to start a new thread with the problem and we can try to help out

Brewdev's avatar

This import did the trick for me: import { createInertiaApp, Head, Link } from "@inertiajs/vue3";

Please or to participate in this conversation.