You need to have a few things set up first before going through this post if you are a beginner, if you are not please feel free to skip to what is Vue CLI.
- You need Vue JS globally installed on your machine, you can check if you already have by running the command below in your terminal:
- If you see a version then you can go along, but if you see an error message, it would prompt you to run this command below:
1npm install vue
- You also need Node.js version 8.9 or above (v10+ recommended). You can manage multiple versions of Node on the same machine with nvm
What is Vue CLI?
This is the node installable command-line interface with which you can run Vue commands in the terminal. It is a powerful system for rapid Vue JS development, you can scaffold a new Vue project and prototype your app as you build in one command. The CLI is super extensive, integrating nicely with the Vue build tools so that you do not spend unnecessary time on configurations, and when you do choose to do so the CLI also allows you to handle config without ejecting. It is the standard tooling baseline for using Vue JS which provides you with the Vue CLI service which is a runtime dependency, built on Webpack with 0 configs. It has a very extensive collection of plugins you can add to your project with a line of command.
How to install Vue CLI
Installing the Vue CLI is done by running one single command in your terminal:
1npm install -g @vue/cli2# OR3yarn global add @vue/cli
This depends on your package manager, after the installation is complete the Vue binary can now be accessed anywhere on your machine. This can be confirmed by running the Vue command like this:
What you would see is a help result that can help you navigate your first few commands:
1Usage: vue <command> [options]23Options:4-V, --version output the version number5-h, --help output usage information67Commands:8create [options] <app-name> create a new project powered by vue-cli-service9add [options] <plugin> [pluginOptions] install a plugin and invoke its generator in an already created project10info print debugging information about your environment1112Run vue <command> --help for detailed usage of given command.
Notice how Vue commands work with three keywords, this is the only format for Vue commands. If you already have Vue installed and it is an old version, you can easily upgrade it with this command:
1npm update -g @vue/cli2# OR3yarn global upgrade --latest @vue/cli
Vue CLI vs WebPack
Building your first Vue app with the CLI
If you have followed this let us go ahead and build our first Vue app using the CLI. Open your terminal to the file location of your choice or use VS Code’s embedded terminal. Run the command below to create a new Vue project:
1vue create newapp
The first thing you would see are two options to pick a preset with your arrow keys, the default which has babel and ESlint config out of the box or another option to select your own features.
If you chose manual you would see features such as Babel, TypeScript, PWA support, Router, VueX, Linter, Unit testing and you can choose more than one. It will ask a couple of other questions for more clarity on the selected features and then you can save the custom preset for future use which is an amazing feature by the way.
This command we just ran has a few shortcuts you can learn to even make your process faster, here is a list from the Vue docs
1Usage: create [options] <app-name>23create a new project powered by vue-cli-service456Options:78 -p, --preset <presetName> Skip prompts and use saved or remote preset9 -d, --default Skip prompts and use default preset10 -i, --inlinePreset <json> Skip prompts and use inline JSON string as preset11 -m, --packageManager <command> Use specified npm client when installing dependencies12 -r, --registry <url> Use specified npm registry when installing dependencies13 -g, --git [message|false] Force / skip git initialization, optionally specify initial commit message14 -n, --no-git Skip git initialization15 -f, --force Overwrite target directory if it exists16 -c, --clone Use git clone when fetching remote preset17 -x, --proxy Use specified proxy when creating project18 -b, --bare Scaffold project without beginner instructions19 -h, --help Output usage information
For example, knowing you will pick the default preset without manual configuration, the next time you want to create a new app, you can just prompt it to use the default with this shortcut:
1vue create --default newapp2OR3vue create -d newapp
This would return the exact same result with what we did above, but without the prompts. If you have saved a preset before with a name such as “preset1”, when next you want to create a new project with that same preset, all you have to do is to run the command like this:
1vue create --preset preset1 newapp
This would immediately tell Vue to create a new project with preset1 settings. Now you have created the Vue boilerplate project, you can run the app in the development server right from the CLI with this command:
1cd newapp2npm run serve
If you open your browser to localhost:8080 you will see the app is running.
Other popular Vue CLI commands
You can do a lot of cool things with the CLI, some of them include
- Adding Vue plugins to your Vue application, remember those features we saw when we chose the manual selection when we wanted to create a new Vue project? Those features can be added to a Vue project after it has already been created. Adding a feature like Vuex is as easy as a single command:
1vue add vuex
- Building out the project for production. After you have built your Vue app, it is time to host it and so you need to bundle the app into static files so that it can be hosted. This can also be done easily using the Vue CLI, to do this, usually after your app has been built and ready to be deployed you can run this command:
1npm run build
- Inspecting your Webpack config without exporting the application an generating a whole new file can also easily be achieved with the Vue CLI using the command below:
This basically lets you take a look at the config by Webpack and what exactly is being generated by the CLI.
- Invoking helpful testing plugins can also be done with the Vue CLI to scaffold out everything you need to start testing with Cypress:
1vue invoke e2e-cypress
This makes sure that cypress is setup with required scripts for testing in your Vue project.
When to use Vue CLI
Vue CLI is perfect for beginners who want to get up and running with their first Vue projects. It does not require any additional config. It is also perfect for developers of all levels who have a lot of Vue projects to start a new project, the speed and zero-barrier to just start coding in a few minutes is really great.
The Vue UI
This is one of the special things about the Vue CLI, it has a GUI version and this would definitely blow your mind especially if you have used the CLI for a while now. Go open your terminal and run the command below:
This is exactly what you would see in your default browser.
This is an amazing way to manage Vue projects, install and customize dev tools, run your Vue app both in the development server and in production. You can also install plugins, instead of using the command I showed before, you can do it with a simple search and button click like this:
You can do linting, you can change the settings in your config files and do practically 97% of all the things you can do in the IDE with the CLI. This is a great product and a testament to the fact that the Vue core team cares about getting more people to use Vue because of the great focus placed on the ease of use.
In this post we have taken a look at the Vue CLI tool, what it is, why it is great and even how it differs from Webpack. We also learnt how to get started with building a new Vue app and a few popular commands to try out, happy hacking!
Observability for Production Vue Apps
Debugging Vue apps in production may be challenging and time consuming. Asayer is a frontend monitoring tool that replays everything your users do and shows how your app behaves and renders for every issue. It’s like having your browser’s inspector open while looking over your user’s shoulder.
Asayer helps to quickly get to the root cause by reproducing issues as if they happened in your own browser. It also monitors your frontend performance by capturing key metrics such as page load time, memory consumption and slow network requests.
Happy debugging, for modern frontend teams - Start monitoring your web app for free.