September 12, 2020

Vue 3: A Modern Setup That Will Save You Time

  • css
  • javascript
  • typescript
  • vue

With the third major version of Vue being almost ready, I started using it for most of my new Vue projects. For years, I have been using the excellent Vue CLI to scaffold new apps, but recently Vite (French for fast ⚡️) caught my eye.

Vite is an opinionated build tool by the creator of Vue, Evan You. It has built-in support for modern front-end tools (PostCSS, CSS preprocessors, TypeScript, ES imports...), it's extensible, but most of all: it's fast. By using modern browsers' native ES Module imports (a similar approach as Snowpack), launching the dev server only takes seconds and hot reloading is instant.

Setting up a new Vite project takes little time, here's how I do it.

Creating a new Vite App

First of all, open your terminal and navigate to the parent directory of your new project. Run the following commands:

yarn create vite-app my-new-project
cd my-new-project
yarn

This will create a my-new-project folder containing the base files you need to get started, navigate you to the root of your project, and install dependencies.

Running the Dev Server

Now run the following command to start the dev server:

yarn dev

If you point your browser to http://localhost:3000/ you will see your Vue app running. Try changing some things in src/HelloWorld.vue and watch how the page will refresh the changed parts in a blink.

Vue 3 application running in the browser

Building for Production

Running the Vite dev server will only work in browsers that support native ES Module imports (that's all of the latest versions of today's modern browsers). To build your app for production, run the following command:

yarn build

Behind the scenes, Vite will use Rollup to bundle and optimize your app. The result will be copied to the dist folder.

Vue 3 application running in the browser

Future-Proof CSS

Vite natively supports CSS imports and uses PostCSS for CSS processing. This means you can add a postcss.config.js file and install any plugin you might need. I like to use the postcss-preset-env plugin, which lets you write modern CSS and polyfills it based on the browsers you want to support.

First, install the plugin by running

yarn add -D postcss-preset-env

Now add the following postcss.config.js file to the root of your project:

module.exports = {
  plugins: {
    'postcss-preset-env': { stage: 1 },
  },
}

The stage property defines how many experimental features you want to enable, from 0 (experimental) through 4 (stable).

You can now write modern CSS while Vite will take care of translating it to the browser:

@import '_base.css';

@custom-media --small-viewport (max-width: 31.25em);

:root {
  --color-primary: red;
  --color-secondary: blue;
}

p {
  color: var(--color-primary);

  &:hover {
    color: var(--color-secondary);
  }

  @media (--small-viewport) {
    color: black;
  }
}

It's up to you how and where you want to load your CSS styles. You can either use the <style> block in your Single File Components or import it directly in your main.js file.

A note about SCSS

Sometimes I still prefer the power of SCSS over CSS. Luckily, Vite supports pre-processors. All you need to do is install it:

yarn add -D sass

TypeScript

Vue 3 has very good support for TypeScript. Whether you want to use it for better typing in the new Composition API or just to improve editor autocompletion, Vite supports TypeScript out of the box. Rename your main.js file to main.ts and you're ready to go.

A TypeScript-based Single File Component's <script> block typically looks like this:

import { defineComponent } from 'vue'

export default defineComponent({
  name: 'MyComponent'
})

Code Formatting

To keep my code style consistent, I use Prettier. Prettier has great support for Vue and integrates well with other tools (editors, linters...). To use Prettier, install it first:

yarn add -D prettier

You can now configure your code style by adding .prettierrc.json to the root of your project. I like to keep mine close to the default configuration:

{
  "semi": false,
  "singleQuote": true,
  "trailingComma": "all"
}

Linting

Most code editors have support for ESLint code inspection. It will prevent bugs by warning you for common errors. Setting everything up correctly took some trial and error, but here's how I did it.

First, install the necessary packages by running

yarn add -D eslint eslint-config-prettier eslint-plugin-vue

If you're using TypeScript, you should also install the following packages:

yarn add -D typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser @typescript-eslint/eslint-plugin @vue/eslint-config-typescript typescript

Now add the following .eslintrc.js to the root of your project:

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    'plugin:vue/vue3-recommended',
    'eslint:recommended',
    'prettier',
    'prettier/vue',
    '@vue/typescript',
  ],
  plugins: ['vue'],
}

Take a look at the ESLint Vue Plugin docs to see how you can configure your editor to work with ESLint.

ESLint will now take both your Prettier config and the recommended Vue coding rules into account. You can replace plugin:vue/vue3-recommended with one of the following values, depending on how you strict you would like ESLint to be:

  • Base Rules: plugin:vue/base
  • Essential: plugin:vue/vue3-essential
  • Strongly recommended: plugin:vue/vue3-strongly-recommended

TLDR;

Since I started using this rather minimal Vite-based dev setup, I spent more time on actual coding and less time on configuring tools or waiting for builds to complete. I think Vite (and similar tools like Snowpack) will play a big role in making modern front-end coding more enjoyable and easier to get started with.

Interested in learning more about developing interactive web apps with Vue? Don't hesitate to ask me about my Vue workshops.