How To Create A Vue.js 3 Plugin Component With Others In Minutes And Publish NPM!
Vložit
- čas přidán 9. 07. 2024
- 🚨Are you stuck on code, or your career? Get mentored by me! - 1 Week Free Trial - mentorcruise.com/mentor/erikh...
Creating a reusuable component plugin is very straight forward in Vue! In this video we create a fun image uploader, we test the plugin, and publish it to npm! #vue3 #vue3tutorial
👉Check out my last video on building a Google Homepage within 60 minutes
• Can I Create The Googl...
👉 Sign up and get free Vue cheat sheets and updates!
www.vuecourse.tech/
Need some mentoring, help with a project, get a career in tech, level up your skills? Check it out
👉mentorcruise.com/mentor/erikh...
Need to Learn Vue or Nuxt? Check out my courses below!
bit.ly/2LalQka - Learn Nuxt.js Course!
bit.ly/3aiYe8s - Quick Starter On Vue 3
bit.ly/2OETt0M- Full 6 Module course on vue!
🗂️ 🗂️ 🗂️
0:00 Introduction
0:58 Creating A Component
13:35 Creating the Plugin
25:02 Setting Up The Vite Build System
33:40 Publishing to NPM
Links
github.com/ErikCH/i-viewer-vu...
Need help with Code? Need help with your career? Check out this program, with a free 1 week trial! mentorcruise.com/mentor/erikhanchett/
Do you have the repo uploaded that you added to component(from npm) in Git. I am noticing when I pull my component down from npm it has no render property on it.
Oh some handy little nuggets of information in here! Thanks, Erik!!
Highly useful my dude!
Thank you very much. it is really work! I spent a lot of time for this issue and you resolve it!
Great video!!!
Great video. Thanks
Thanks! Very helpful
Thanks for the video, what autocompletion extension do you use?
Thank you for this video. -- It has given me the basic knowledge I need to build my own component library.
It's not clear to me why you have recommended typescript2 plugin. -- Is this plugin required or just a nice to have feature if my project is using typescript? -- What does the plugin actually do ?🙂
Thanks! It's work fine. I have a question. Is it possible to obtain the d.ts of the components in the destination project?
What vscode plugin do you use that prompts the imports as you write?
hi sir, thank you very much.
But i have a question, when use the component SpecialUploader in project. it don't type hint data type :(
I'm getting an error about the entry module using both named and default exports. Due to this it isn't compiling to the dist folder. Any workaround for this?
Do you have the repo uploaded that you added to component(from npm) in Git. I am noticing when I pull my component down from npm it has no render property on it.
ModuleNotFoundError: Could not find module in path: 'vue/3.3.4/dist/vue.common.js' relative to '/node_modules/viewer-img-vue/dist/index.js'
i got this error when i try to use your package
When I am writing the vite.config, I am getting this error. Do any idea on that "Type 'Plugin' is not assignable to type 'PluginOption'."
Thank you for letting me know how to make a typescript library published to NPM so that other typescript projects can use it correctly by 'import {x} from y'.
By "import {x} from y" you are probably referring to "named exports".. I have the same question..
Seems that my earlier reply was deleted?? Anyway, I figured out a way that seem to work. In this case I actually export two components. I have to manually create an index.d.ts in the dist folder with this definition in it:
declare module 'my-plugin' {
import { VueConstructor } from 'vue'
const ComponentOne: VueConstructor
const ComponentTwo: VueConstructor
export {
ComponentOne,
ComponentTwo
}
}
You can now import { ComponentOne, ComponentTwo } from my-plugin, without needing the Vue plugin system.
can we use this npm package with react or with other frameworks>
is it work this plugin with the vue2 application?
This theme is synthwave?
hello, what kind of comments are hints when you write?
I have a very large vue project. How can I make a part of the project as plugins and use in current project as well as export it for another project ?
How can I use async/await in a plugin? Where do I put the async keyword?
I ran into an issue with my build.
require$$0 ... No matching export for import default.
From...
The import that supposed to contain the Vue after I have excluded Vue from bundling
Shouldn't we also put vue into `peerDependencies`?
Thanks Erik great tuto. One thing, at the moment:
From version 0.33 and ^ of "rollup-plugin-typescript2", it does not generate ViewerPlugin.d.ts anymore. Don't know why but downgrading to 0.32.1 or lower is working as in this tuto.
Let me check
@@ProgramWithErik Yeah same issue with mine, it only generates the components d.ts
i get an error saying while trying to run build: An import path cannot end with a '.ts' extension. Consider importing '/Users/mlvrkhn/Work/component-lib/2/uiview-plugin/src/components/UiView.vue?vue&type=script&setup=true&lang.js' instead.
anyone may know why is that?
I'll look into this
I still can’t get over that microphone. It’s outrageous 😆
Ha! Yeah, it's in the way. I should move it next video
👍
Great video! One thing it doesn't tell : how can you customize the style of a component you are importing. I have been struggling on this one for some time now.
You can override the CSS? Or in the SFC update the scoped styles.
@@ProgramWithErik when you want to customize only some instances rather than all of them globally, using the ":deep()" syntax in scoped CSS section
Its not working. Including vue files in vite.config means I get a bunch of messy code that calls a location on my PC disk.. Without it it comes without type safety. Also needed to add types in "." package.json export object
any updates on that sir ?
@@jasseramari4948 yup, had to do lots of stuff in vite.config along with tsconfig
wow, a very long video hehe but thanks anyway.. :)
One thing I did't like at all is looking on another monitor so often. Even for very small things. Just feels like you are copying entire script.
I feel like the fact that he wrote a script is why it's such a great demo.
It's really not clear. Feels like you are explaining to people who already know everything
This is a pretty advanced topic, so I imagine you'd need to know at least a little bit about everything before tackling it.