Vue CLI 3 is finally stable. We migrated our main app last week. Here’s how it went.

Why Migrate?

Vue CLI 2 was getting old:

  • Webpack 3 (Webpack 4 is out)
  • Manual configuration
  • Hard to upgrade dependencies

Vue CLI 3 promises:

  • Zero config
  • Plugin system
  • Modern tooling (Webpack 4, Babel 7)
  • GUI for project management

The Migration

No automatic migration tool. Had to create a new project and move code over.

Step 1: Create New Project

npm install -g @vue/cli
vue create my-app

Selected features:

  • Babel
  • Router
  • Vuex
  • CSS Pre-processors (Sass)
  • Linter (ESLint + Prettier)
  • Unit Testing (Jest)

Step 2: Move Code

Copied over:

  • src/ directory
  • public/ directory (was static/ in CLI 2)
  • Environment variables (.env files)

Step 3: Update Dependencies

npm install axios vue-i18n element-ui

Step 4: Configure

Created vue.config.js:

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/my-app/' : '/',
  
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true
      }
    }
  },
  
  css: {
    loaderOptions: {
      sass: {
        data: `@import "@/styles/variables.scss";`
      }
    }
  },
  
  chainWebpack: config => {
    // Modify webpack config
    config.plugin('html').tap(args => {
      args[0].title = 'My App'
      return args
    })
  }
}

Much cleaner than ejecting webpack config!

Step 5: Fix Import Paths

CLI 3 uses @ alias for src/:

// Before
import Component from '../components/Component'

// After
import Component from '@/components/Component'

Step 6: Update Tests

Jest config is built-in. Just update test files:

// Before
import Vue from 'vue'
import Component from '@/components/Component'

describe('Component', () => {
  it('renders', () => {
    const vm = new Vue(Component).$mount()
    expect(vm.$el.textContent).toContain('Hello')
  })
})

// After - using @vue/test-utils
import { mount } from '@vue/test-utils'
import Component from '@/components/Component'

describe('Component', () => {
  it('renders', () => {
    const wrapper = mount(Component)
    expect(wrapper.text()).toContain('Hello')
  })
})

What We Gained

1. Faster Builds

CLI 2:

  • Dev build: 15 seconds
  • Production build: 2 minutes

CLI 3:

  • Dev build: 5 seconds
  • Production build: 45 seconds

Webpack 4 + better caching = much faster.

2. Modern Mode

CLI 3 can build two versions:

  • Modern (ES2015+) for modern browsers
  • Legacy (ES5) for old browsers
vue-cli-service build --modern

Modern browsers get smaller, faster bundles. Old browsers still work.

3. Plugin System

Adding features is easy:

# Add TypeScript
vue add typescript

# Add PWA support
vue add pwa

# Add Electron
vue add electron-builder

Plugins modify your project automatically. No manual configuration.

4. GUI

vue ui

Opens a web interface for:

  • Creating projects
  • Installing plugins
  • Running tasks
  • Analyzing bundle size

The bundle analyzer is particularly useful.

5. Better Defaults

Out of the box, you get:

  • Hot module replacement
  • CSS extraction
  • Source maps
  • Asset optimization
  • Tree shaking
  • Code splitting

No configuration needed.

Issues We Hit

1. ESLint Errors

CLI 3 is stricter. Had to fix:

  • Unused variables
  • Console.log statements
  • Missing semicolons

Took a day to clean up.

2. Environment Variables

CLI 2: Any variable in .env
CLI 3: Only variables starting with VUE_APP_

# .env
VUE_APP_API_URL=http://localhost:3000
VUE_APP_TITLE=My App

// Access in code
process.env.VUE_APP_API_URL

3. Public Path

CLI 2: assetsPublicPath
CLI 3: publicPath

Had to update deployment scripts.

Migration Time

  • Small project (< 20 components): 2 hours
  • Medium project (50 components): 1 day
  • Large project (100+ components): 2-3 days

Most time spent fixing linter errors and updating tests.

Should You Migrate?

Yes, if:

  • You’re starting a new project
  • Your build is slow
  • You want modern tooling

Wait, if:

  • Your app works fine
  • You don’t have time
  • You’re on a tight deadline

We migrated because we wanted faster builds and modern tooling. Worth it.

Tips for Migration

  1. Create new project, don’t try to upgrade in place
  2. Fix linter errors gradually (disable rules temporarily if needed)
  3. Update tests (use @vue/test-utils)
  4. Test thoroughly before deploying
  5. Update CI/CD scripts (different build commands)

The Verdict

Vue CLI 3 is a huge improvement. Faster builds, better defaults, easier configuration.

If you’re on CLI 2, plan a migration. It’s worth the effort.

Questions? Ask away!