Nuxt•2y ago

Vue 3 Component Library in Nuxt 3

Hi, I'm trying to create a Vue 3 component library with Vite and typescript. I'm wondering if I am creating the plugin correctly because when I try and import the components I get the error

Module '"sample-library"' has no exported member 'UiButton'. Did you mean to use 'import UiButton from "sample-library"' instead?

Below is my index.ts file that is supposed to export my components:

import { App, Plugin } from 'vue';
import 'tailwindcss/tailwind.css';
import './index.css';

import UiButton from './components/UiButton.vue';

const SampleLibrary = {
  install: (Vue: App) => {
    Vue.component('UiButton', UiButton);
  },
} as Plugin;

export default SampleLibrary;

import { App, Plugin } from 'vue';
import 'tailwindcss/tailwind.css';
import './index.css';

import UiButton from './components/UiButton.vue';

const SampleLibrary = {
  install: (Vue: App) => {
    Vue.component('UiButton', UiButton);
  },
} as Plugin;

export default SampleLibrary;

I then import this into a plugin's file in my Nuxt app like this:

import SampleLibrary from 'sample-library';

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(SampleLibrary);
});

import SampleLibrary from 'sample-library';

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(SampleLibrary);
});

I would like to components to be registered globally and auto imported like normal components. I must be doing something wrong. Is anyone able to help with this?

2 Replies

Unknown User•2y ago

Message Not Public

TheFlyer1983OP•2y ago

I eventually followed this article: https://medium.com/@blaster203/how-to-create-a-component-library-with-vue-3-vitejs-typescript-8eb41f799045 1 problem I can across though was I was unable to globally import my components. I had to import them locally.

Medium

How to create a component library with Vue 3 + ViteJS + TypeScript?

We’re using ViteJS to create the component library. With the option, build.lib we will create the library. If you want to learn more about…

Gaming

Programming

Vue 3 Component Library in Nuxt 3