Тёмный
No video :(

How To Create A Vue.js 3 Plugin Component With Others In Minutes And Publish NPM! 

Program With Erik
Подписаться 123 тыс.
Просмотров 20 тыс.
50% 1

Опубликовано:

 

28 авг 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 47   
@ProgramWithErik
@ProgramWithErik 2 года назад
Need help with Code? Need help with your career? Check out this program, with a free 1 week trial! mentorcruise.com/mentor/erikhanchett/
@kebrewer
@kebrewer 9 месяцев назад
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.
@brandonsayring
@brandonsayring 2 года назад
Oh some handy little nuggets of information in here! Thanks, Erik!!
@kevinbowe
@kevinbowe 7 месяцев назад
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 ?🙂
@rajikkali2381
@rajikkali2381 2 года назад
Highly useful my dude!
@icuxika
@icuxika 2 года назад
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'.
@svenema7
@svenema7 Год назад
By "import {x} from y" you are probably referring to "named exports".. I have the same question..
@svenema7
@svenema7 Год назад
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.
@codewithguillaume
@codewithguillaume 2 года назад
Great video!!!
@uliasavi7290
@uliasavi7290 2 года назад
Thank you very much. it is really work! I spent a lot of time for this issue and you resolve it!
@mehmetaltinsoy525
@mehmetaltinsoy525 2 года назад
Great video. Thanks
@begenchbekmyradov
@begenchbekmyradov Год назад
Thanks! Very helpful
@jeanpaulsanchezmendoza1328
@jeanpaulsanchezmendoza1328 Год назад
Thanks! It's work fine. I have a question. Is it possible to obtain the d.ts of the components in the destination project?
@mosesrahul3225
@mosesrahul3225 2 года назад
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?
@kasvith
@kasvith 2 года назад
Shouldn't we also put vue into `peerDependencies`?
@vominhtien8379
@vominhtien8379 Год назад
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 :(
@kebrewer
@kebrewer 9 месяцев назад
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.
@user-gy3rm9hf7m
@user-gy3rm9hf7m Год назад
can we use this npm package with react or with other frameworks>
@dvdrtrgn
@dvdrtrgn 2 года назад
I still can’t get over that microphone. It’s outrageous 😆
@ProgramWithErik
@ProgramWithErik 2 года назад
Ha! Yeah, it's in the way. I should move it next video
@syiana2194
@syiana2194 2 года назад
Thanks for the video, what autocompletion extension do you use?
@alekseybrazhnikow7622
@alekseybrazhnikow7622 Год назад
hello, what kind of comments are hints when you write?
@rubenvandenhoek
@rubenvandenhoek Год назад
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.
@ProgramWithErik
@ProgramWithErik Год назад
Let me check
@baguscodestudio
@baguscodestudio Год назад
@@ProgramWithErik Yeah same issue with mine, it only generates the components d.ts
@rohankumar393
@rohankumar393 Год назад
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 ?
@RichellyItalo
@RichellyItalo 2 года назад
This theme is synthwave?
@patricklenert
@patricklenert 2 года назад
How can I use async/await in a plugin? Where do I put the async keyword?
@user-gy3rm9hf7m
@user-gy3rm9hf7m Год назад
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
@lszk86
@lszk86 Год назад
What vscode plugin do you use that prompts the imports as you write?
@rajjagani
@rajjagani Год назад
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'."
@tobychidi
@tobychidi 2 года назад
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
@VinaySingh-nq4ge
@VinaySingh-nq4ge 2 года назад
is it work this plugin with the vue2 application?
@saaika5922
@saaika5922 Год назад
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
@jasseramari4948
@jasseramari4948 4 месяца назад
any updates on that sir ?
@saaika5922
@saaika5922 3 месяца назад
@@jasseramari4948 yup, had to do lots of stuff in vite.config along with tsconfig
@LostInTheShell
@LostInTheShell 2 года назад
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.
@ProgramWithErik
@ProgramWithErik 2 года назад
You can override the CSS? Or in the SFC update the scoped styles.
@LostInTheShell
@LostInTheShell 2 года назад
@@ProgramWithErik when you want to customize only some instances rather than all of them globally, using the ":deep()" syntax in scoped CSS section
@Martin-jq8th
@Martin-jq8th Год назад
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?
@ProgramWithErik
@ProgramWithErik Год назад
I'll look into this
@виртуоз_ру
@виртуоз_ру 2 года назад
👍
@JenuelDev
@JenuelDev 2 года назад
wow, a very long video hehe but thanks anyway.. :)
@jamesbhatta
@jamesbhatta 2 года назад
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.
@theAutomaTom
@theAutomaTom Год назад
I feel like the fact that he wrote a script is why it's such a great demo.
@yadusolparterre
@yadusolparterre 2 года назад
It's really not clear. Feels like you are explaining to people who already know everything
@theAutomaTom
@theAutomaTom Год назад
This is a pretty advanced topic, so I imagine you'd need to know at least a little bit about everything before tackling it.
Далее
Every New Vue Developer Has Made These Mistakes...
18:04
А ВЫ УМЕЕТЕ ПЛАВАТЬ?? #shorts
00:21
Просмотров 1,9 млн
Can You Bend This Bar?
01:00
Просмотров 4,5 млн
I Wish I knew This About Typescript & React Sooner
14:06
Creating a Re-usable Vue 3 Store Plugin with Typescript
57:05
Create a library using Vite lib mode
30:00
Просмотров 19 тыс.
А ВЫ УМЕЕТЕ ПЛАВАТЬ?? #shorts
00:21
Просмотров 1,9 млн