Vue Component including Inertiajs-Link Not working in Project

Question

I'm going to build small UI library package with Vue components and use it in my Inertia-Laravel Project.

//Logo.vue

<template>
    <Link href="/" class="text-xl font-bold flex items-center lg:ml-2.5">
        My Logo
    </Link>
</template>
<script>
import { Link } from '@inertiajs/inertia-vue3'
export default {
    name: "Logo", 
    components: {
        Link,
    },
}
</script>

I was able to build this as package Vite or Vue-SFC-RollUp and publish it on npm.

But when I was going to install it on my inertia/laravel projects and use it, I got some warning and error.

MyProjectComponent.vue

<template>
...
<Logo />
...
</template>
<script>
import {Logo} from 'mypackage-ui'

export default {
components: {Logo}
}
</script>

Error message:

export 'default' (imported as  'require$$1') was not found in 'vue' 
(possible exports: BaseTransition, Comment, EffectScope, ... , withScopeId)

If I remove <Link> in Logo.vue and use <a> tag and update package, then it's working well.

Any suggestion would be highly appreciated. I'm using Vue 3.

Answer 1

The solution to this is to add the inertia link as a component in the app.js file:

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)
            .component('InertiaHead', Head)
            .component('InertiaLink', Link)
            .use(ZiggyVue, Ziggy)
            .mount(el);
},

});