VueJS team has recently launched VUE CLI 3.0 which lot of cool features.
In this blog post we will discuss these new features and see how we can implement these in our VueJS projects and some of the best practices to always use in your projects.
Vue CLI is a tooling framework for vue projects. Basically its a command line tool which allows us to manage project depenencies likes (vue router, vuex, other packages), manage webpack configuration, deployments like (dev, build) and many other things.
Let’s first see in short, what are the new features of vue cli 3.0 which makes it compelling to use 3.0 for your projects.
- No webpack configuration.
- Your project will not have any webpack configuration at all! Its managed internally via vue cli. This is a huge relief for people who has seen all the pain which webpack can cause
- Vue CLI Plugins
- There are many packages like vuetify, sass, crypress which require developers to make changes to package.json and webpack configuration to work. Vue CLI plugins enable this internally. Installing a plugin will make all the required changes to webpack, package.json tasks, etc and manage the full plugin installation.
- Vue UI
- Vue CLI introduced a full UI to manage plugins/dependencies/tasks for your project via a UI interface. No need to do yarn server or yarn add from terminal anymore. Vue UI allows all tasks to be performed via graphical interface
- Initial Project Configuration
- If you are starting a new project, you set your entire project dependencies like vue router, vuex, css preprocess, eslint config etc out of the box
Let’s see vue cli in action now
Project Setup
First make sure you have installed the latest vue cli
npm install -g @vue/cli # OR yarn global add @vue/cli
next
vue -V # Should display something like this 3.0.0-rc.3
Once you have installed vue-cli@3, lets create a new project and we will use the new vue graphics interface.
vue ui
this will do the following
$ vue ui Starting GUI... Ready on http://localhost:8000 Auto cleaned 1 projects (folder not found).
and you will see this on your browser
next you can create a new project
next select the project features
next we get a screen to select the project structure
PWA (if needed) you can enable it.
Router, Vuex can be selected if its needs to be enabled.
CSS Pre-processor if you want to use sass, less, stylus
There are further configuration options down the screen as well.
Next finally, we can do “Create Project”
For this step you can simply “Continue without saving” for now.
This will now start the steps to create project, install all dependencies.
This will setup the project source code, packages and everything in the background.
After its done, you can see your project dashboard
If you have set a global git config username, email an automatic initial git commit is done. If you need to commit yourself. It’s highly recommended at this stage to do an initial commit.
You can set global git config via these commands
$ git config --global user.name username $ git config --global user.email [email protected] $ cd sample/ $ git add -A && git commit -m "initial project setup"
Now we can run the project via VUE UI Tasks -> Serve -> Run Task
If you look at the task output, you can see your project running at localhost:8080
VUE UI is a full graphic interface to manage entire project configuration and tooling.
VUE CLI Plugins
Now we can look at plugins and how can use them.
If we go at Plugins -> Add Plugin we can see a list of all plugins
Let’s see how we can install vuetify plugin and also in the process see how plugins greatly simplify things.
All this can be done from terminal as well, but currently we are doing it via the graphical ui.
As per the official guide https://vuetifyjs.com/en/getting-started/quick-start#existing-applications to install a plugin which doesn’t use vue-cli@3 there are number of steps to follow like making changes to main.js, App.vue, etc. You can look at those.
With vue plugin there is just a simple step
$ vue add vuetify
It’s very important do a commit in the project before you install any plugin. The reason being vue-cli will not just makes changes to package.json but rather all the project files. So using git diff, we can look at the file changes and also git stash to undo a plugin install.
Once you installed the above vuetify plugin if you open localhost:8080 it will have entire vuetify pre-installed.
Vue plugin all add tasks, configuration to the project.
This is what is find great about vue-cli plugins, zero configuration to install.
After plugin is installed successfully,
Make sure to do a commit at this step. It’s very important.
Now, if you run the task “server” we see this output
Let’s install another plugin “vue-cli-plugin-i18n”
after you install the plugin and follow the regular steps, you will see a new tab in vue ui.
This is very interesting, with vue ui allows plugins to add more configuration via the GUI.
Dependencies
Project dependencies are npm package which can be installed without any configuration e.g being moment-js, lodoash, axios, etc. These are important libraries which we require and can be installed simply via npm install command.
Plugins are package which require configuration in the project, while dependencies are simply libraries which we can install and use
We can install dependencies via vue ui or command line. This is a standard process, nothing new about it.
Above we saw the new features in vue-cli
Other important configuration options which i think every project requires are seen here
https://cli.vuejs.org/config/#devserver-proxy
https://cli.vuejs.org/guide/cli-service.html#vue-cli-service-inspect (vue ui also allows us to inspect the webpack build)
https://cli.vuejs.org/guide/mode-and-env.html
Above are really important for every project setup and should be used.
We will explore these in different blog posts soon.
Plugins Uninstallation We saw about that vue-cli-plugins are quite useful, but there a drawback to them. If we have installed a plugin, there is no automatic way for it to get uninstalled. We have manually removed all the code which plugin added from our files. Due to this, its very important that you commit your code before starting a plugin install and then you are able to easily look at git diff. This way you can easily remove a plugin later if need be.