DEV Community

Cover image for Playground for our Components! Setting up Webpack and Bable Vue 3 typescript component - part 3
Michael "lampe" Lazarski
Michael "lampe" Lazarski

Posted on • Originally published at youtu.be

5 2

Playground for our Components! Setting up Webpack and Bable Vue 3 typescript component - part 3

Hey,

Let us build a component Library together!
In the part we will install webpack, babel, vue and much more!
We will create a playground for our components and load our button component into our playground!

The npm packages we have installed:



// webpack
npm i --save-dev webpack webpack-cli clean-webpack-plugin webpack-dev-server babel-loader html-webpack-plugin 
// vue
npm i --save-dev vue-loader@next vue@next @vue/compiler-sfc @vue/component-compiler-utils @vue/babel-plugin-jsx
// css/sass
npm i --save-dev style-loader postcss-loader sass-loader sass
// babel
npm i --save-dev @babel/cli @babel/core @babel/plugin-transform-runtime @babel/preset-env @babel/preset-typescript


Code Repo for youtube: https://github.com/lampewebdev/lcs-components-yt
Code Repo for the project: https://github.com/lampewebdev/lcs-components

**👋Say Hello!** [Instagram](https://www.instagram.com/lampewebdev/) | [Twitter](https://twitter.com/lampewebdev) | [LinkedIn](https://www.linkedin.com/in/michael-lazarski-25725a87) | [Medium](https://medium.com/@lampewebdevelopment) | [Twitch](https://dev.to/twitch_live_streams/lampewebdev) | [YouTube](https://www.youtube.com/channel/UCYCe4Cnracnq91J0CgoyKAQ)
Enter fullscreen mode Exit fullscreen mode

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay