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.
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
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!
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? ;}
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 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.
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.
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?
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`}
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?
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 };
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?
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??
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')
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?
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)
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.
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!
One of best best starter tutorials I have seen so far.
6 minutes for the whole process! Perfect! Thanks!
This was a fantastic video that help me connect quite a few vite and package.json properties and what they're actually for.
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!
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? ;}
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?
Great help! Not even Copilot could fix this, thx.
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.
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
hello, do you have any repository with this project? it would be very helpful
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?
Great tutorial, but how to use our library in nuxt 3 project?
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`}
Exactly the video I needed, at the right time ! Thanks 😊
💚
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?
this exactly what i searching for ❤
Surprisingly great tutorial, thanks
Thanks a lot ! Also looking for that typescript support :D
Great content. Will watch your other videos. Keep the good work.
thank you!
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
Thank you so much!!!!! And `npm link`, AWESOME!!!!
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 };
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
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 importing css inside app.vue necessary? can we do it automatically?
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?
how do you feel about single components vs a monorepo for components
how can we add iife or unpkg here as output in build
Woah i just hoping you create a library tutorial and its really happen. 😲
👀 glad to hear
can you make an example but using typescript pls :)
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
ok now again for a ts lib?
Hi LearnVue, how can we make this compatible with a Nuxt 3 app?
Thank you!!!🙇🏾♂
Please make this video with Nuxt3
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?
is this used to do microfrontend architecture?
will this component work with vue 2 and vue class components?
Same question here.
How I can create NPM library using Vue2 without Vite?
apt!!!👏
Can you give the whole code, please?
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)