Publish a Vue Component to NPM // Vite and Vue 3

[@MrDaskaF]

About the 2 min mark, I think you missed that you have to add the file name to the template literal on line 14: fileName: (format) => `lv-button.${format}.js` . Did my head in for a bit, hope it helps someone else.

[@Furlock627]

You just actually did! Thank you man

[@nitraM321]

i think that it's actually better to NOT include the name of the component in those filenames, it makes the package,json easier to reuse as you don't have to specify it

[@robyc9545]

why? he didn't talk much why we need the fileName field either.

[@alexandervu6015]

One of best best starter tutorials I have seen so far.

[@dmitrykurmanov]

6 minutes for the whole process! Perfect! Thanks!

[@RodrigoDAgostino]

Really concise and comprehensive guide :) You’re bringing up so many new things I’d like to try, but I still can’t find the time to do so xP Thank you!

[@LearnVue]

thanks as always!

[@dferg]

I’ve actually been wanting to see a quick run through of this exact thing. This is awesome, thanks

[@LearnVue]

glad to see it was a timely video!

[@dbroche]

Know what I like about these videos? They’re always extremely USEFUL. And reflect what I actually want to learn! Speaking of “useful” how about a video on the VueUse library? ;}

[@marcelojoc]

hello, do you have any repository with this project? it would be very helpful

[@yossarian499]

Great tutorial, one point that I had to change, when|after following it, to make it work: At 1:52 fileName(format) => `${format}.js` is incomplete, as the it also needs the name. I did fileName (format) {return `${this.name}.${format}.js`}

[@taylorjohnsonct]

This was a fantastic video that help me connect quite a few vite and package.json properties and what they're actually for.

[@bernanribeiro3329]

This video made this be easy peasy. Thanks! I have just one question. Is it possible include our css directly in the component, without need import the style in your main project? I have I problem when try run my demo project, v-for from my plugin component doesnt work when I run build command.

[@duketranslucent3rd]

Thanks fo sharing. However, this guide has a lot of issues, at least based on my experience. 1. You don't specify that to use `path` in vite.config.js, you must first require() it 2. You also don't specify that to require path, you need to first disable the default option of type=module in the package.json generated by `npm init vite` 3. When you say run `vite build`, you actually mean run the *script* command in the package.json which runs `vite build`, i.e. `npm run build`. Running the former will error. 4. It's not clear what should go into styles.css, or whether this should be explicitly created. 5. When I build, I end up with .mjs and .umd.js files, but not an .es.js file 6. Not sure if this is significant, but when you test this tutorial on NPM's runkit, it throws an error. All in all, when I link my package to another project and then try to use it, it says " The package may have incorrect main/module/exports specified in its package.json.".

[@makboyakram]

This was the comment I have been looking for.

[@lmartinez2205]

Any fix?

[@hideakitoro7530]

Great help! Not even Copilot could fix this, thx.

[@sanusivictorolajuwon514]

Hi LearnVue, this is a very good tutorial. Thanks for sharing. My question is that how I add typescript support to my published package so that people can get props auto-completion when they use it. Thanks.

[@sanusivictorolajuwon514]

I do hope LearnVue can look into this

[@nabenzanol]

Straight to the point, wondefull

[@AndrewRusinas]

Just in time 😍 I was looking for a way to create package with Vite and Vue 3, but had to stick with vue-sfc-rollup due to lack of information out there. What do you think about vue-sfc-rollup, btw?

[@fikrinurfadillah6151]

Great tutorial, but how to use our library in nuxt 3 project?

[@mertcertel1989]

this exactly what i searching for ❤

[@jigarprajapati897]

Thank you for making the video on this topic, I have create custom component with primevue and primevue.config is not loaded. can you please help me on it?

[@andreasblondeau1682]

Exactly the video I needed, at the right time ! Thanks 😊

[@LearnVue]

💚

[@adammackintosh9645]

Surprisingly great tutorial, thanks

[@PureAlbania]

Great content. Will watch your other videos. Keep the good work.

[@LearnVue]

thank you!

[@kaandesu4881]

Hi, great video! i have a question. I made a vite plugin for vue and tested in some projects with npm link before publish. and it worked pretty well with vite, Quasar Framework(with vite). But when I tried to install them to VueCli or Quasar Framework (with webpack), they did work but disabled the HMR. which made the reactive data from the plugin didn't shown unless a force update... Is it possible to make my vite plugin work in webpack environment? or i should try doing the same plugin somehow in webpack as well??

[@bobek8030]

is importing css inside app.vue necessary? can we do it automatically?

[@Froggie92]

how do you feel about single components vs a monorepo for components

[@iandashb]

Thank you so much!!!!! And `npm link`, AWESOME!!!!

[@bafian]

Thanks a lot ! Also looking for that typescript support :D

[@johnkristijanhermann3420]

Great video! This example is for one component, but how do you add several components with modular import?

[@LearnVue]

That's a question that someone solved on the GH for this, so I'd recommend giving it a read github.com/LearnVueCo/tutorial-code/issues/1 The tl;dr is to replace the Vue plugin with imports/exports of each component import LearnVueButton from './components/LearnVueButton.vue'; export { LearnVueButton };

[@sanusivictorolajuwon514]

Hi LearnVue, how can we make this compatible with a Nuxt 3 app?

[@abstractlym8320]

is this used to do microfrontend architecture?

[@leonardssh]

I see that your videos look a lot like the ones made by Jeff (from @Fireship), and I like that, keep it up! l🥰

[@LearnVue]

love those videos and have a similar goal of not creating super long videos but instead get you all the essential info as fast as possible!

[@dbroche]

@@LearnVue you’re doing a great job living up to your goal my friend

[@i_bench_225]

But let's say i make a relatively big library, won't the .js file be bloated? How can i separate various components in different js files?

[@suhagsidrayasarak5883]

how can we add iife or unpkg here as output in build

[@NeelanshMathur]

This is GREAT! One thing I really want to know is, I made a vue-ts project and want the typings (like my props) to be added in the final dist folder. Any idea how I can achieve that?

[@smash3689]

Use @rollup/plugin-typescript

[@ColinRichardson]

And if you do not wish for it to install globally once you have imported it, and just use it standalone (but keep the option to have it install globally by default)? how would one do that?

[@Santoshkumar-bb6jy]

hi, a nice video liked the way you explained. Have no issues with the build using vite, but when using on a vue project am getting the following error, any idea on how to resolve.........Uncaught TypeError: Cannot read properties of null (reading 'isCE')

[@jamesfuller6520]

It has to do with Vite bundling Vue into the library - I'm facing the same problem

[@dalu_]

ok now again for a ts lib?

[@shaiksadath7639]

will this component work with vue 2 and vue class components?

[@jonathan-arias]

Same question here.

[@tbrew222]

Thank you!!!🙇🏾‍♂

[@Pescado92]

can you make an example but using typescript pls :)

[@ZynthProductions]

Woah i just hoping you create a library tutorial and its really happen. 😲

[@LearnVue]

👀 glad to hear

[@palach_666]

Please make this video with Nuxt3

[@earthmovers8922]

How I can create NPM library using Vue2 without Vite?

[@hannahchiamakaejimofor2571]

apt!!!👏

[@musketeer765]

Can you give the whole code, please?

[@MrT-tn4qe]

path is undefined, you are missing something from your code

[@michaellautieri2723]

Anyone else having issues rolling the lv-button? I tried today and got this error vite v3.0.2 building for production... ✓ 1 modules transformed. [vite:build-import-analysis] Parse error @:5:12 file: C:/Users/Michael/Desktop/vite-project/src/components/LearnVueButton.vue:5:11 3: 4: 5: ^ 6: 7: error during build: Error: Parse error @:5:12 at parse$b (file:///C:/Users/Michael/Desktop/vite-project/node_modules/vite/dist/node/chunks/dep-1513d487.js:33570:355) at Object.transform (file:///C:/Users/Michael/Desktop/vite-project/node_modules/vite/dist/node/chunks/dep-1513d487.js:40656:27)