Publish a Vue Component to NPM // Vite and Vue 3
Why Stack Overflow recommends it
Stack Overflow users cite it as the tutorial they followed when setting up a shareable Vue 3 component library with Vite, usually before asking about problems like reactivity, missing CSS, or Nuxt compatibility.
Recommended by 0 people across 0 different months, 2022 to 2023.
What it is
A short LearnVue tutorial by Matt Maribojoc showing how to package a Vue 3 component with Vite's library mode and publish it to NPM. It covers the build config and publishing steps, using a small example package called lv-button.
What people said
Cites Drekembe · 2022-06 · Stack Overflow · on “Imported component from local vite+vue library not updating”
I'm researching options for a new project at work. We're thinking of using nuxt (or just regular vue 3) and creating a library where we will be keeping our shared components. I'm trying to do the initial setup, but am having problems. I followed this tutorial [this video] to create the library and added typescript to it. I created a sample component with a counter and exported it. The problem is that when I import the component from my library in a consuming project (whether it's the nuxt project or a vanilla vite vue project), the component looks like it's not reactive. Its internal counter is supposed to increase when it's clicked, but it's not updating. There are no errors or warning in the co
Cites user9540234 · 2023-06 · Stack Overflow · on “Shareable Vite/Vue component - why am I getting error about missing CSS export?”
I've been following this video [this video] to build a shareable Vue component via Vite, which I'm then testing by npm link ing it into another project. After building with Vite via npm run bulid and then linking, I end up with this structure in my other project's node_modules dir: - mycomponent - dist - style.css - mycomponent.es.js - mycomponent.umd I can successfully import my component - BUT it lacks CSS! So according to the above video I needed to do (in my main.js ): import MyComponent from 'mycomponent' import 'mycomponent/dist/style.css' ... const app = createApp(App) .use(...) .use(Mycomponent) I don't really want it to be globally available in this way, but I'm just trying to fix the CS
Cites aleng · 2023-10 · Stack Overflow · on “Publish a Nuxt 3 app/components on npm that is usable by normal Vue 3 without Nuxt”
The usual way for me publishing a vue component is based on this video [this video] . And for Nuxt 3, the workflow is way easier, almost nothing much to configure just npm publish and then just install the package, use extend, and it's just work. So my question is, how to configure a Nuxt 3 app that can cater for both Nuxt3 and Vue project(without Nuxt). So does it mean I still need to use index.js, then configure my nuxt.config nuxt.config vite:{ build: { lib: { // Could also be a dictionary or array of multiple entry points entry: resolve(__dirname, 'src/index.js'), name: 'MyLib', // the proper extensions will be added fileName: 'my-lib', }, rollupOptions: { // make sure to externalize deps tha