Vue CLI 3 — the deep dive
Vue CLI is a simple, but powerful tool created for scaffolding Vue.js projects.
It ensures that various build tools work smoothly together with sensible defaults so you can focus on writing your app rather than spend time battling with configurations
Vue CLI 3 is about the best thing to happen to the Vue ecosystem as of right now and here’s why:
1. Plugin-based architecture
The new CLI implements what we call a plugin based architecture, which is a major improvement from the previous version that used a template based architecture.
This means that, there’s now just one template and every other feature you need will be added as a plugin.
2. Flexibility
The new CLI has made it super easy to start a new project, without having to think of all the features you might need in the future.
You can just create the project, get right into coding, and when the there’s a need for a feature, JUST ADD IT!
3. Zero-config rapid prototyping
This allows you to serve your vue app or component like you’re serving an html file.
4. Vuex
The new CLI allows you to add vuex to your project, just the way you could add the vue router in the previous version.
5. Typescript
There’s now an official CLI support for bootstrapping a Typescript Vue.js app
6. Custom plugins
If all the fine official CLI plugins are not enough, there’s support for creating your own custom plugin (and, of course, publishing your plugins so others can make use of them.
Installing Vue CLI 3
To install the CLI run the code below.
npm install -g @vue/cli
This will install the latest version of the Vue CLI. Once done you can confirm what version you have installed by running:
vue -V
Change in CLI commands
There’s been a slight change in CLI commands from the previous version, and new commands were added to the pack of goodies.
vue create myproject creates a new project named myproject.
vue serve <filename>serves .js or .vue files in development mode with zero config.
vue build <filename>builds production ready bundle from .js or .vue files with zero config.
vue invoke <pluginname>invokes the installed plugins generators to create the files needed for the plugin to work.
vue inspect displays the webpack configuration of the app since it’s been completely abstracted away.
vue init is reserved for users that still prefer to use the previous legacy version 2, but to use this command, you would have to install a global bridge
To do this, run the code below in your terminal.
npm install -g @vue/cli-init
Once the installation is done. You can now start using version 2 directly in version 3 whenever you feel like.
vue init webpack newapp
Creating a new project
To create a new project run the code below in your terminal
vue create projectname
where projectname is the name of the app you want to create.
You will be prompted to pick a preset, either the default preset ( which contains babel & eslint configs) or manually select the features you want.
If you choose the default preset, the CLI is going to create your project and install the necessary plugins to get it up and running.
If you choose to manually select the features, the CLI will proceed by showing you all the plugins supported out of the box and would ask you to select the ones you would like to add to the project.
To select, use the spacebar on your keyboard or key A to select all the plugins.
When done hit the Enter key to proceed.
Depending on what plugins where selected, additional prompts will be displayed, Just select what you need and hit enter and let the CLI do it’s thing.
One of the cool things with the new CLI is that the project created also automatically creates a new repo for your project on your machine.
Plugins supported out of the box
- Typescript @vue/typescript
- Progressive Web App (PWA) @vue/pwa
- Vue Router
- Vuex
- Css Preprocessors ( postcss, css modules, sass, less & stylus )
- Linter / Formatters @vue/eslint
- Unit Testing @vue/mocha or @vue/jest
- E2E Testing @vue/cypress or @vue/nightwatch
Presets
In creating a new project with the CLI and manually selecting features, a preset is created.
The preset created is what the CLI uses to create project files.
It’s written in JSON and contains all the features that you selected when you created a new app.
Presets can be reused thus making it easy for you to just skip right into the app without going through that whole feature selection process when creating future apps.
To create a new project with the CLI from a previously saved preset, change directory into the location of the preset and run the code below
vue create -p presetname newproject
This uses the preset file specified to create a project name called newproject.
Adding CLI plugins to an existing project
To add a plugin to an already created project, just run the command below
vue add @vue/pwa
Where @vue/pwa is the name of the plugin you want to add, in this case the Progressive Web App plugin.
One thing to note is that the new CLI now accepts shorthand names for packages e.g @vue/pwa is a shorthand for the CLI package @vue/cli-plugin-pwa.
The CLI resolves the name @vue/valueto @vue/cli-plugin-value to install the package.
Zero-config rapid prototyping
The new CLI makes it super easy to just serve .vue or .js files either in development or production mode with the vue serve and vue build commands.
This is perfect for cases where you just want to test out your ideas and you really don’t want to bother about configurations.
To use this command you have to first install the vue CLI global service.
To do this just run the code below in your terminal.
npm install -g @vue/cli-service-global
Once the installation is done, you can use either vue serve or vue build.
Vue serve
vue serve app.vue
Where app.vue is the name of the component or file you want to serve.
The serve command also provides an option to launch your browser once it’s done running the command as opposed to just showing you the url it’s currently serving the app at.
To do that, run vue serve -o app.vue
Vue build
vue build app.vue
where app.vue is the name of the component or file you want to serve.
The vue build command builds a production ready bundle and it also allows you to specify if you would like to build it as a library or a web component.
To build as a library, vue build -t lib app.vue while to build as a web component, vue build -t wc app.vue .
Environment variables
The new CLI now allows you to use environment variables using a .env file in your project’s root.
The file consists of key=value pair.
Everyone needs to manage at least 2 environments, which means we need to specify variables for this environments.
To do this effectively, the CLI introduces what we call modes.
Modes are just another name for environment, which specifies if you’re in development, production or test mode.
To create variables that are only used by a particular mode. You have to add the mode’s name as a suffix to the .env filename.
.env.development for development mode & .env.production for production mode.
Note: for the CLI to embed a variable into the client bundle code, the variable needs to be prefixed with the VUE_APP_ name.
Adding variable seckey now becomes VUE_APP_SECKEY
Tweaking Webpack Config
Vue CLI provides a very easy and flexible way of tweaking the internal webpack config.
To do this, you have to use the configureWebpack option in vue.config.js
// vue.config.js module.exports = { configureWebpack: { plugins: [new MyAwesomeWebpackPlugin()] } }
Just in case you don’t already have the vue.config.js file in your project root. You would have to create it manually.
You might be wondering: “How do I know what’s already in the internal Webpack config so I know what I need to add?”
Well this is where the vue inspect command becomes handy.
This command outputs all the internal Webpack config to your terminal.
To output it to a file, just specify a file name like this
vue inspect \> output.js
Summary
The new CLI is still in beta at the time of this writing, so there might be a couple bugs in there. In fact, it’s advised to not use in production yet unless you are adventurous.
Cheers!
Plug: LogRocket, a DVR for web apps
LogRocket is a frontend logging tool that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong.
It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.
In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single page apps.
Try it for free.
Latest comments (0)