Vue Component including Inertiajs-Link Not working in Project - vue.js

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);
},
});