This post’s aim is to give readers an understanding of the options available when creating a new Vue.js project. So we can pick and select what we really need.
The most recent version of Vue available at the time of writing is 5.0.8.
First install Vue globally. Open the CMD/Windows PowerShell and run the command below. For more information visit https://cli.vuejs.org/guide/installation.html.
npm install -g @vue/cliAfter installing Vue globally, create your project with the command
vue create projectNameAfter entering the command there will be options like the image below
There is 2 default option. The only difference is that the first one is for Vue.js version 3 and the second one is for version 2. If you pick Manually select features, as you can see from the image more options will pop up.
Now we will try to understand what we might need for our project and why! To select and unselect use space from keyboard. Each option is described below.
Babel
JavaScript is upgrading consistently. But nearly all the web browsers are not compatible with latest version of JavaScript. Babel convert our upgraded JavaScript code into ES5 version of JavaScript(which is compatible with all browsers). Babel is a must need for vue.js project.
TypeScript
TypeScript is a Object Oriented Programming Language which extends JavaScript. TypeScript basically helps you with the variable types and many more.
Progressive Web App (PWA) Support
Progressive Web App (PWA) gives the website a app/Native feel. PWA is Searchable(SEO friendly), Installable(You can save Pages in device), Linkable and able to work offline or in Low network stability and many more. If you select PWA, It will create a registerServiceWorker.js file in you project, which helps you to build many features like offline, cache, update. You can do many more with this like notifications, payment holder, etc. If you want to give user notifications, app-like service PWA support is necessary.
Router
Router plugin works as the other language’s router like, <a> in html. If you need any type of routing in your project router plugin is a need.
Vuex
Vuex is a state management pattern/library for Vue.js. If a shared data/state changed in on component other shared component need a update of the change. It manages state/data in a centralized manner. So shared data management becomes much easier. If your project has a large number of shared data, Vuex is necessary for optimization.
CSS Pre-processors
This plugin allows you to use SASS, LESS or Stylus.
Linter/Formatter
This check format and potential logical bugs depends of the future options you choose.
ESlint analyze the code and find potential problems. Airbnb, Standard config and prettier check the code format.
Unit Testing & E2E Testing
Unit testing test the units(Components) of the application. It test’s in small portion. Finding bug is easy in Unit testing and it takes less time than Snapshot testing/E2E testing.
E2E testing is End to End Testing. It test the application all together in large scale.
If you work on a large project unit testing is most important to find and prevent bugs easily. If your project is small E2E testing should be effective. And also you can use Both.
I hope this helped beginners like me to understand which plugins we actually need and which we don’t.