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.
