Migration from v1

Config Options Change

  • The following options have been removed and should be implemented via plugins:

    • resolvers
    • transforms
    • indexHtmlTransforms
  • jsx and enableEsbuild have been removed; Use the new esbuild option instead.

  • CSS related options are now nested under css.

  • All build-specific options are now nested under build.

    • rollupInputOptions and rollupOutputOptions are replaced by build.rollupOptions.
    • esbuildTarget is now build.target.
    • emitManifest is now build.manifest.
    • The following build options have been removed since they can be achieved via plugin hooks or other options:
      • entry
      • rollupDedupe
      • emitAssets
      • emitIndex
      • shouldPreload
      • configureBuild
  • All server-specific options are now nested under server.

  • assetsInclude now expects string | RegExp | (string | RegExp)[] instead of a function.

  • All Vue specific options are removed; Pass options to the Vue plugin instead.

Alias Behavior Change

alias is now being passed to @rollup/plugin-alias and no longer require start/ending slashes. The behavior is now a direct replacement, so 1.0-style directory alias key should remove the ending slash:

- alias: { '/@foo/': path.resolve(__dirname, 'some-special-dir') }
+ alias: { '/@foo': path.resolve(__dirname, 'some-special-dir') }

Alternatively, you can use the [{ find: RegExp, replacement: string }] option format for more precise control.

Vue Support

Vite 2.0 core is now framework agnostic. Vue support is now provided via @vitejs/plugin-vue. Simply install it and add it in the Vite config:

import vue from '@vitejs/plugin-vue'

export default {
  plugins: [vue()]
}

Custom Blocks Transforms

A custom plugin can be used to transform Vue custom blocks like the one below:

// vite.config.js
import vue from '@vitejs/plugin-vue'

const vueI18nPlugin = {
  name: 'vue-i18n',
  transform(code, id) {
    if (!/vue&type=i18n/.test(id)) {
      return
    }
    if (/\.ya?ml$/.test(id)) {
      code = JSON.stringify(require('js-yaml').safeLoad(code.trim()))
    }
    return `export default Comp => {
      Comp.i18n = ${code}
    }`
  }
}

export default {
  plugins: [vue(), vueI18nPlugin]
}

React Support

React Fast Refresh support is now provided via @vitejs/plugin-react-refresh.

HMR API Change

import.meta.hot.acceptDeps() have been deprecated. import.meta.hot.accept() can now accept single or multiple deps.

Manifest Format Change

The build manifest now uses the following format:

{
  "index.js": {
    "file": "assets/index.acaf2b48.js",
    "imports": [...]
  },
  "index.css": {
    "file": "assets/index.7b7dbd85.css"
  }
  "asset.png": {
    "file": "assets/asset.0ab0f9cd.png"
  }
}

For entry JS chunks, it also lists its imported chunks which can be used to render preload directives.

For Plugin Authors

Vite 2 uses a completely redesigned plugin interface which extends Rollup plugins. Please read the new Plugin Development Guide.

Some general pointers on migrating a v1 plugin to v2:

Since most of the logic should be done via plugin hooks instead of middlewares, the need for middlewares is greatly reduced. The internal server app is now a good old connect instance instead of Koa.