Vite for Existing Vue CLI Projects

Running a build for your Vue is a common task for many Vue developers. The team behind Vue has been working on a development server to simplify this. This project is called Vite.

I've been playing with Vite a little bit and while there are tons of demos showing how to get started, I wanted to show you how to use Vite on your existing projects.

What is Vite?

First of all, Vite is not limited to it's use with Vue. Vite works with React, Vanilla JS, and Vue. The goal is to allow you to develop modern JavaScript projects without having to do bundling builds on every change.

It's effectively a development server for JavaScript. It uses addins for different development projects (including Vue of course). You can read the walk-through on the development website:

Vite

Adding Vite to Vue CLI Projects

If you're already using the CLI, adding Vite shouldn't be that much trouble. The first step is to add Vite and the Vue plugin into your devDependencies:

> npm install vite @vitejs/plugin-vue --save-dev

Once that is complete, you'll need a vite.config.js (or .ts) file. In that, you'll specify the plugin (vue in our case):

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

export default {
  plugins: [vue()]
}

Once you have that in place, you'll need an page to host it. Remember, that you're going to be using the root of your project as the root of a development web server, so putting an index.html in the project works:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="icon" href="/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Your App</title>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
</body>
</html>

This is different from your public/index.html that the Vue CLI uses (as it doesn't need to inject anything), though you can use that as the basis of this file.

Notice that the script tag is pointing at the starting point of the 'vue' project. If you have multiple starting points, you'll need more than one HTML file and since it's just a web server, that's just fine.

Next, you'll need to add vite to the scripts in package.json (here called 'dev'):

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "dev": "vite"
  },

If you open a console to the project and type:

> npm run dev

You should see it prep and surface your project at an URL.

  Vite dev server running at:

  > Network: http://172.26.240.1:3000/
  > Network: http://192.168.160.1:3000/
  > Network: http://172.31.105.19:3000/
  > Local: http://localhost:3000/

  ready in 369ms.

As you make changes, it will hot-swap code to help you debug in real time.

Let me know if this helps!

This work by Shawn Wildermuth is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.

Based on a work at wildermuth.com.

If you liked this article, see Shawn's courses on Pluralsight.

Blog

Vite for Existing Vue CLI Projects

Shawn Wildermuth

What is Vite?

Adding Vite to Vue CLI Projects

Join Our Newsletter. No Spam, Only the good stuff.

Related