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.
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.
The SFC Playground (opens new window) also supports downloading the files as a Vite project.
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
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).
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.
If using Vite, we recommend Cypress (opens new window) as the test runner for both unit and e2e tests. Unit tests for Vue SFCs can be done with the Cypress Component Test Runner (opens new window).
Vue CLI comes with Jest (opens new window) and Mocha (opens new window) integrations.
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 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)]
@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).
© 2013–present Yuxi Evan You
Licensed under the MIT License.
https://v3.vuejs.org/api/sfc-tooling.html