Publish a Vue Component to NPM // Vite and Vue 3
Vložit
- čas přidán 1. 02. 2022
- Whether you're building a component library, utils package, or just want to share your package with other developers, NPM is a must. Learn how to publish your Vite projects and Vue 3 components to NPM!
LINKS
www.npmjs.com/package/lv-button
vitejs.dev/guide/build.html#l...
✅ FREE VUE 3 CHEATSHEET WITH ESSENTIAL CODE SNIPPETS
learnvue.co/vue-3-essentials-...
follow me on twitter:
/ mattmaribojoc
🚨 Like quick Vue lessons like these? Check out 800+ lessons over on Vue School - go.learnvue.co/vueschool
Music by Lukrembo
6 minutes for the whole process! Perfect! Thanks!
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.
You just actually did! Thank you man
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
why? he didn't talk much why we need the fileName field either.
One of best best starter tutorials I have seen so far.
I’ve actually been wanting to see a quick run through of this exact thing. This is awesome, thanks
glad to see it was a timely video!
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!
thanks as always!
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? ;}
Exactly the video I needed, at the right time ! Thanks 😊
💚
This was a fantastic video that help me connect quite a few vite and package.json properties and what they're actually for.
Surprisingly great tutorial, thanks
this exactly what i searching for ❤
Great content. Will watch your other videos. Keep the good work.
thank you!
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.".
This was the comment I have been looking for.
Any fix?
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?
Thanks a lot ! Also looking for that typescript support :D
Thank you so much!!!!! And `npm link`, AWESOME!!!!
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.
Thank you!!!🙇🏾♂
hello, do you have any repository with this project? it would be very helpful
how do you feel about single components vs a monorepo for components
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.
I do hope LearnVue can look into this
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`}
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??
is this used to do microfrontend architecture?
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?
Use @rollup/plugin-typescript
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?
Great video! This example is for one component, but how do you add several components with modular import?
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 };
Hi LearnVue, how can we make this compatible with a Nuxt 3 app?
is importing css inside app.vue necessary? can we do it automatically?
ok now again for a ts lib?
Great tutorial, but how to use our library in nuxt 3 project?
can you make an example but using typescript pls :)
Please make this video with Nuxt3
How I can create NPM library using Vue2 without Vite?
Can you give the whole code, please?
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')
It has to do with Vite bundling Vue into the library - I'm facing the same problem
I see that your videos look a lot like the ones made by Jeff (from @Fireship), and I like that, keep it up! l🥰
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!
@@LearnVue you’re doing a great job living up to your goal my friend
Woah i just hoping you create a library tutorial and its really happen. 😲
👀 glad to hear
apt!!!👏
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?
will this component work with vue 2 and vue class components?
Same question here.
path is undefined, you are missing something from your code
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)