DEV Community

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

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

lampewebdev profile image Michael "lampe" Lazarski Originally published at youtu.be ・1 min read

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

Discussion (0)

pic
Editor guide