# 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:
- Vue SFC Playground (opens new window) (official, deployed from latest commit)
- VueUse Playground (opens new window)
- Vue on CodeSandbox (opens new window)
- Vue on Repl.it (opens new window)
- Vue on Codepen (opens new window)
- Vue on StackBlitz (opens new window)
It is also recommended to use these online playgrounds to provide reproductions when reporting bugs.
# Project Scaffolding
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
Then select the Vue template and follow the instructions.
- To learn more about Vite, check out the Vite docs (opens new window).
- To configure Vue-specific behavior in a Vite project, for example passing options to the Vue compiler, check out the docs for @vitejs/plugin-vue (opens new window).
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
- To learn more about Vue CLI, check out Vue CLI docs (opens new window).
# 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.
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
If you are manually configuring Jest to work with Vue SFCs, check out vue-jest (opens new window) which is the official Jest transform for Vue SFCs.
# 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 Vue CLI or plain webpack, a webpack loader should be configured to transform the matched blocks. [Example (opens new window)]
# Lower-Level Tools
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.
Official plugin that provides Vue SFC support in Vite.
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).