Vue 3 mit
Vite Dev Server

Fynn Becker

Das Problem mit Vue CLI

Langsamer Start des Dev Servers
Langsames Hot Module Replacement (HMR)

Die Idee

Evan You am 20. April 2020: "As I was going to bed, I had an idea about a no-bundler dev setup (using native browser ES imports), but with support for Vue SFCs **with hot reload**. Now it's almost 6AM and I have PoC working. The hot reload is so fast it's near instant."

twitter.com/youyuxi/status/1252173663199277058

Lösungsansatz von Vite

Kein Bundling im Dev Server
Native JS Modules (ESM)
On-demand compilation
Bundling für Production

Vite

{
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  "dependencies": {
    "vue": "^3.0.3",
    "vue-router": "^4.0.0-rc.5",
    "vuex": "^4.0.0-rc.2"
  },
  "devDependencies": {
    "vite": "^1.0.0-rc.13",
    "@vue/compiler-sfc": "^3.0.3",
    "sass": "^1.29.0"
  }
}

Vue CLI

{
  "scripts": {
    "dev": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "vue": "^3.0.3",
    "vue-router": "^4.0.0-rc.5",
    "vuex": "^4.0.0-rc.2"
  },
  "devDependencies": {
    "@vue/cli-service": "^4.5.9",
    "@vue/compiler-sfc": "^3.0.3",
    "sass": "^1.29.0"
  }
}

Vite

<!DOCTYPE html>
<html lang="de">

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="…">
    <title>Vue App</title>
  </head>

  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>

</html>

Vue CLI

<!DOCTYPE html>
<html lang="de">

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="…">
    <title>Vue App</title>
  </head>

  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>

</html>

Demo

Templates

Preact
Preact (TypeScript)
React
React (TypeScript)
React (Reason)
Vue
Vue (TypeScript)

github.com/vitejs/create-vite-app

Mehr über Vite

slides.com/fynn/vue-3-mit-vite-dev-server

Vue 3 mit Vite Dev Server

By Fynn Becker