Vue.js

# SFC Tooling

# Online Playgrounds

You don't need to install anything on your machine to try out Vue SFCs - there are many online playgrounds that allow you to do so right in the browser:

It is also recommended to use these online playgrounds to provide reproductions when reporting bugs.

# Project Scaffolding

# Vite

Vite (opens new window) is a lightweight and fast build tool with first-class Vue SFC support. It is created by Evan You, who is also the author of Vue itself! To get started with Vite + Vue, simply run:

npm init vite@latest
1

Then select the Vue template and follow the instructions.

The SFC Playground (opens new window) also supports downloading the files as a Vite project.

# Vue CLI

Vue CLI (opens new window) is the official webpack-based build tool for Vue projects. To get started with Vue CLI:

npm install -g @vue/cli
vue create hello-vue
1
2

# Vite or Vue CLI?

We recommend starting new projects with Vite as it offers significantly better development experience in terms of dev server startup and HMR update performance (details (opens new window)). Only go with Vue CLI if you rely on specific webpack features (e.g. Module Federation).

If you are a Rollup (opens new window) user, you can safely adopt Vite as it uses Rollup for production builds and supports a Rollup-compatible plugin system. Even Rollup's maintainer recommends Vite as THE web development wrapper for Rollup (opens new window).

# IDE Support

The recommended IDE setup is VSCode (opens new window) + the Volar (opens new window) extension. Volar provides syntax highlighting and advanced IntelliSense for template expressions, component props and even slots validation. We strongly recommend this setup if you want to get the best possible experience with Vue SFCs, especially if you are also using TypeScript.

WebStorm (opens new window) also provides decent support for Vue SFCs. However, do note as of now its support for <script setup> is still in progress (opens new window).

Most other editors have community-created syntax highlighting support for Vue, but lack the same level of code IntelliSense. In the long run, we do hope we can extend the range of editor support by leveraging the Language Service Protocol (opens new window) as Volar's core logic is implemented as a standard language server.

# Testing Support

# Custom Blocks Integration

Custom blocks are compiled into imports to the same Vue file with different request queries. It is up to the underlying build tool to handle these import requests.

  • If using Vite, a custom Vite plugin should be used to transform matched custom blocks into executable JavaScript. [Example (opens new window)]

  • If using Vue CLI or plain webpack, a webpack loader should be configured to transform the matched blocks. [Example (opens new window)]

# Lower-Level Tools

# @vue/compiler-sfc

This package is part of the Vue core monorepo and is always published with the same version as the main vue package. Typically, it will be listed as a peer dependency of vue in a project. To ensure correct behavior, its version should always be kept in-sync with vue - i.e. whenever you upgrade the version of vue, you should also upgrade @vue/compiler-sfc to match it.

The package itself provides lower-level utilities for processing Vue SFCs and is only meant for tooling authors that need to support Vue SFCs in custom tools.

# @vitejs/plugin-vue

Official plugin that provides Vue SFC support in Vite.

# vue-loader

The official loader that provides Vue SFC support in webpack. If you are using Vue CLI, also see docs on modifying vue-loader options in Vue CLI (opens new window).