Browser Devtools
The Vue browser devtools extension allows you to explore a Vue app's component tree, inspect the state of individual components, track state management events, and profile performance.
1) Documentation.
2) Chrome Extension.
3) Firefox Addon.
4) Edge Extension.
5) Standalone Electron app
Formatting
The VolarVSCode extension provides formatting for Vue SFCs out of the box.
How to import Vue SFC into JavaScript?
Just use the main vue/compiler-sfc deep import instead.
This package contains lower level utilities that you can use if you are writing a plugin / transform for a bundler or module system that compiles Vue Single File Components (SFCs) into JavaScript.
It is used in vue-loader, rollup-plugin-vue and vite.
IDE Support
The recommended IDE setup is VSCode + the Vue Language Features (Volar) extension.
The extension provides syntax highlighting, TypeScript support, and intellisense for template expressions and comp.
Is compiler-SFC inside the project root?
In some cases, compiler-sfc may not be inside the project root (e.g. when linked or globally installed).
In such cases a custom require can be passed to correctly resolve the preprocessors. transformAssetUrls?:
AssetURLOptions | AssetURLTagConfig | boolean; . Linting
The Vue team maintains eslint-plugin-vue, an ESLintplugin that supports SFC-specific linting rules.
Users previously using Vue CLI may be used to having linters configured via webpack loaders.
However when using a Vite-based build setup, our general recommendation is: 1. npm install -D eslint eslint-plugin-vue, then follow eslint-plugin-vue's confi.
Project Scaffolding
Vite
SFC Custom Block Integrations
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.
1) If using Vite, a custom Vite plugin should be used to transform matched custom blocks into executable JavaScript.
Example.
2) If using Vue CLI or plain webpack, a webpack loader should.
Testing
Main article: Testing Guide.
1) Cypress is recommended for E2E tests.
It can also be used for component testing for Vue SFCs via the Cypress Component Test Runner.
2) Vitestis a test runner created by Vue / Vite team members that focuses on speed.
It is specifically designed for Vite-based applications to provide the same instant feedback loop for .
Try It Online
You don't need to install anything on your machine to try out Vue SFCs - there are online playgrounds that allow you to do so right in the browser:.
1) Vue SFC Playground 1.1.
Always deployed from latest commit 1.2.
Designed for inspecting component compilation results.
2) Vue + Vite on StackBlitz 2.1.
IDE-like environment running actual Vite dev ser.
Typescript
Main article: Using Vue with TypeScript.
1) Volar provides type checking for SFCs using
What is a compiled SFC?
A
compiled SFC is a standard JavaScript (ES) module - which means with proper build setup you can import an SFC like a module: . What is Vue single-file components (SFC)?
Vue Single-File Components (a.k.a. *.vue files, abbreviated as SFC) is a special file format that allows us to encapsulate the template, logic, and styling of a Vue component in a single file.
Here's an example SFC:
As we can see Vue SFC is a natural extension of the classic trio of HTML CSS and JavaScript. 