The extraordinary rise in the popularity of Vue over the past few years has highlighted some of the issues that developers were facing with previously used frameworks, along with their demands, which was the need for an easier-to-use, flexible, adaptive and performance-driven framework.
That’s exactly what developers got in Vue, and it is one of the reasons why it has grown in popularity among novice and experienced developers. Recently, Evan You, the founder of Vue and his team released the latest version of the much-loved Vue CLI, and it is amazing. But don’t just take our word for it. Here are some of the reasons why the latest iteration of the Vue CLI is an absolute game-changer from a frontend developer’s point of view.
Improved Plugin Architecture
The minimum bare-bones configuration for any Vue CLI project is Babel or Webpack. Other additional features are added using the help of plugins. The integration of these plugins ensures that the process of altering is more streamlined, for instance, for Webpack configuration such as adding a new loader or altering files in a project tree. Regardless of the type of altering you’re looking for: there’s a plugin for that now.
Furthermore, installing a particular plugin has also been made easy in Vue CLI 3, with developers simply needing to install a plugin they need by using an interactive prompt that is also provided while initializing a project. Users are also able to install any additional plugin they need while working on a project by using a simple CLI command.
For those who were wondering what that command is, it’s: ‘vue add my-plugin.’
Webpack
The thorn in the side of many developers is handling the Webpack. But, you will be pleased to know that you do not have to deal with the notorious webpack.config.js in the project root any more when working on a project in the new Vue CLI 3. The creators of Vue were thinking of a way to improve this process and decided that since most of the configuration of a project in Vue CLI 3 is abstracted with plugins and merged into the base configuration during runtime, there’s no need to follow an obsolete method such as the Webpack config.
That’s not to say the Webpack config has been completely eliminated. Tweaking the Webpack config can now be done using the new vue.config.js file. So, if you are looking to add a Webpack plugin, all devs have to do is make sure they drop the right code into the configureWebpack property and voila!
Apart from that, there are multiple options in APIs that are available in the new Vue CLI 3 that can be used for the Webpack config, which makes it a lot easier to mutate it directly.
Using Custom Plugins
In the latest Vue CLI 3, plugins have their own config options, which are specified via the pluginOptions property in vue.config.js, making it easier to carry out tasks such as setting the height or width of a page. Additionally, more complex changes can be carried out by creating your own custom plugin and publish it on NPM to share it with other developers in the growing Vue community around the world.
Direct Editing
With the new Vue CLI 3, developers get no ‘Ejecting,’ which is a term that has been borrowed from Create React App. The term basically refers to the process where dependencies (build and configuration) can be moved from the scripts folder into the project itself. In this way, developers using the new Vue CLI 3 can take advantage of direct editing functionality for configuration.
At first glance, it is also a flexible system, but after having a closer look, you realize that the process is irreversible. Utilizing this process also prevents developers from receiving any upgrades to the scripts, regardless of whether or not the developer had to edit single or multiple scripts.
The use of plugins and configuration APIs in Vue CLI 3 means that there is no need to eject a project in the first place. This means your Vue CLI 3 project is going to remain upgradable throughout the lifecycle of the project, making it easier for developers to make changes to the code and other areas of the app on the fly.
Ability for Rapid Prototyping
Sometimes while in the middle of a project, developers might have the urge to prototype an idea they’ve just had. This happens to all of us developers at some point. But, spending an hour on Webpack and Babel config can be a time suck just so you can get something on the screen. The creators of Vue realized this issue that has plagued many a developer and decided to right that wrong in the latest iteration of Vue CLI 3.
With the Vue CLI 3, developers can go from zero to a served app in the least amount of time as compared to other options. In case you were wondering, this also includes the Webpack dev server along with a great module reloading feature and all other features you would expect to find in the world’s fastest-growing framework.
Ending Note
While some folks might be thinking, a CLI tool is just a utility and does not add any new features to the Vue arsenal. That’s where they are dead wrong. As you have seen, the new Vue CLI 3 is light years ahead of the rest in terms of ease of use and versatility.
The new Vue CLI 3 allows frontend devs to take advantage of instant access to the best build tools for frontend development in the world. And the benefits of the Vue CLI 3 does not stop there. The utility then combines these tools seamlessly with the appropriate defaults while also encouraging easy customization and configuration where needed.
So, in short, it’s safe to say that the new Vue CLI 3 is definitely a game-changer for frontend development because of the level of stability, flexibility and ease of use that it offers developers, especially when building business utility applications.