Inertiajs & Vue Component Library

I recently embarked on creating a custom component library in Vue 3, driven by the desire to repurpose some meticulously crafted UI components from a previous project I developed using the Laravel + Inertia + Vue 3 stack. In that project, I invested significant time and effort into refining the user interface, and I was so pleased with the outcome that I decided to extract these components into a standalone library. The goal was to ensure that the same high-quality, well-designed components could be easily reused across different projects without needing to start from scratch each time.

However, I’ve encountered a problem while integrating the library into my main project. Specifically, when I attempt to use Inertia’s <Link /> component, it throws an error, halting the process. This issue has become a roadblock, and I’m trying to understand how to resolve it so that I can fully leverage the components I’ve worked so hard to perfect.

This is my Link.vue component from the vue-inertia-core library.

<script setup>
import { Link } from "@inertiajs/vue3";
</script>

<template>
    <Link class="text-sm font-bold leading-tight">
        <slot></slot>
    </Link>
</template>

<style scoped></style>

This is the vite.config.js file of the vue-inertia-core library:

import { resolve } from "path";
import vue from "@vitejs/plugin-vue";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": "/src",
      "@assets": "/src/assets",
    },
  },
  css: {
    postcss: resolve(__dirname, "postcss.config.js"),
  },
  build: {
    lib: {
      entry: resolve(__dirname, "src/index.js"),
      name: "VueInertiaCore",
      fileName: "vue-inertia-core",
    },
    rollupOptions: {
      external: ["vue"],
      output: {
        globals: {
          vue: "Vue",
        },
      },
    },
  },
});

and this is the vite.config.js file from the original project where I linked this package.

import laravel from "laravel-vite-plugin";
import vue from "@vitejs/plugin-vue";

const inDevelopment = process.env.NODE_ENV === 'development';

export default defineConfig({
    plugins: [
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
        laravel({
            input: [
                "resources/inertia/css/app.css",
                "resources/inertia/js/app.js",
            ],
            refresh: true,
        }),
    ],
    resolve: {
        alias: {
            "@": "/resources/inertia/js",
            "@assets": "/resources/inertia/assets",
            "@mosaict/vue-inertia-core": inDevelopment ? "@mosaict/vue-inertia-core-dev" : "@mosaict/vue-inertia-core",
            vue: "vue/dist/vue.esm-bundler.js",
        },
    },
});

Any help would be much appreciated. If you need more information, please tell me.

I tried to resolve those components manually but I don’t know what to do. I just want the component from the library to be able to work properly.