Vue CLI 3.0 Alpha: First Impressions

Vue CLI 3.0 alpha dropped last week, and I’ve been playing with it over the weekend. It’s a complete rewrite, and honestly, it’s impressive.

What’s New?

The biggest change is moving from templates to a plugin system. Instead of choosing a template upfront (webpack, webpack-simple, etc.), you start with a base project and add features through plugins.

Getting Started

npm install -g @vue/cli@next
vue create my-project

You get an interactive prompt asking what features you want:

? Check the features needed for your project:
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◉ Vuex
 ◯ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

Pick what you need, and it scaffolds the project. No more choosing between 10 different templates.

The Plugin System

This is the killer feature. Want to add TypeScript to an existing project?

vue add typescript

That’s it. The plugin modifies your project to support TypeScript. No manual webpack configuration.

Want PWA support?

vue add pwa

Done. Service worker, manifest, everything configured.

Zero Config

Out of the box, you get:

• Hot module replacement
• Babel compilation
• CSS extraction
• Asset optimization
• Source maps
• Production builds

No webpack config needed. It just works.

But I Need Custom Config!

You can still customize. Create a vue.config.js:

module.exports = {
  baseUrl: '/my-app/',
  outputDir: 'dist',
  devServer: {
    proxy: 'http://localhost:4000'
  },
  chainWebpack: config => {
    // Modify webpack config
  }
}

The API is much cleaner than raw webpack config.

GUI!

Vue CLI 3 includes a GUI for managing projects:

vue ui

Opens a web interface where you can:

• Create projects
• Install plugins
• Run tasks
• Analyze bundle size
• Configure settings

It’s actually useful, not just a gimmick. The bundle analyzer is particularly nice.

Comparison with Vue CLI 2

Vue CLI 2:

• Choose template upfront
• Templates are hard to update
• Webpack config is ejected and hard to maintain
• Adding features requires manual configuration

Vue CLI 3:

• Start minimal, add features as needed
• Plugins can be added/removed anytime
• Webpack config is abstracted
• Adding features is one command

Migration from CLI 2

There’s no automatic migration. You’ll need to create a new project and move your code over. Not ideal, but the benefits are worth it.

I migrated a medium-sized project (30 components) in about 2 hours. Most of that was updating import paths and fixing linter errors.

What I Like

1. Plugin System

Adding features is trivial. No more copy-pasting webpack config from Stack Overflow.

2. Sensible Defaults

The default configuration works for 90% of projects. You only customize when you actually need to.

3. Modern Tooling

Uses webpack 4, Babel 7, and other modern tools. The old templates were getting outdated.

4. GUI

Surprisingly useful for visualizing bundle size and managing dependencies.

What Needs Work

1. Documentation

It’s alpha, so docs are sparse. I had to read the source code to figure out some things.

2. Plugin Ecosystem

Not many third-party plugins yet. The official ones (TypeScript, PWA, etc.) are solid, but the ecosystem needs to grow.

3. Breaking Changes

It’s alpha, so expect breaking changes. Don’t use in production yet.

Should You Try It?

For new projects: Maybe. If you’re comfortable with alpha software and want to try the new approach.

For existing projects: Wait. It’s not stable enough for migration yet.

For learning: Absolutely. The plugin system is the future of Vue tooling.

What I’m Building With It

I’m rebuilding a side project using CLI 3. So far, the experience has been smooth. The zero-config approach lets me focus on building features instead of configuring tools.

When Will It Be Stable?

Evan You said they’re aiming for a stable release in Q4 2017 or Q1 2018. I’m betting on Q1 2018.

The Future of Vue Tooling

Vue CLI 3 shows where Vue is heading: better developer experience, less configuration, more convention over configuration.

Combined with Vue 2.5 (coming soon with better TypeScript support), the Vue ecosystem is maturing nicely.

Try It Yourself

npm install -g @vue/cli@next
vue create test-project
cd test-project
npm run serve

Play around with it. Add plugins. Check out the GUI. It’s fun.

Just don’t use it in production yet. 😄

What do you think about the plugin approach? Better than templates? Let me know your thoughts.