Unlock the Power of Vue CLI 3

Plugin-Based Architecture

The new CLI implements a plugin-based architecture, a significant improvement from the previous template-based architecture. This means that there’s only one template, and every other feature you need can be added as a plugin.

Flexibility

With Vue CLI 3, you can start a new project without worrying about all the features you might need in the future. You can create the project, start coding, and add features as needed.

Zero-Config Rapid Prototyping

The new CLI allows you to serve your Vue app or component like an HTML file. This is perfect for testing ideas without bothering with configurations.

vue serve MyComponent.vue

Supported Features

Vue CLI 3 supports a wide range of features out of the box, including:

• Typescript
• Progressive Web App (PWA)
• Vue Router
• Vuex
• CSS Preprocessors (PostCSS, CSS Modules, Sass, Less, Stylus)
• Linter/Formatter (ESLint)
• Unit Testing (Mocha, Jest)
• E2E Testing (Cypress, Nightwatch)

Presets

When creating a new project with Vue CLI 3, you can manually select features to create a preset. This preset can be reused to skip the feature selection process in future projects.

vue create my-project --preset my-preset

Adding Plugins

To add a plugin to an existing project, simply run the command vue add <plugin-name>. The new CLI accepts shorthand names for packages, making it easy to install plugins.

vue add eslint

Environment Variables

Vue CLI 3 allows you to use environment variables using a .env file in your project’s root. You can specify variables for different environments by adding the environment name as a suffix to the .env filename.

#.env.dev
VUE_APP_API_URL=https://dev-api.example.com

Tweaking Webpack Config

Vue CLI 3 provides an easy way to tweak the internal Webpack config using the configureWebpack option in vue.config.js.

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.css$/,
          use: ['style-loader', 'css-loader']
        }
      ]
    }
  }
}