What is a .vue file?
Vue Single-File Component · Code and data · Evan You / Vue team · 2015
A .vue file is a single-file component for the Vue framework. It bundles a component's HTML template, its JavaScript logic and its scoped CSS into one file, each in its own block.
What is a .vue file used for?
Inside a .vue file you find template, script and style sections, so everything a component needs lives together. A build tool compiles it into standard JavaScript and CSS for the browser.
This format keeps Vue projects tidy, with one component per file. The files are plain text; VS Code with the Vue extension gives full support.
How to open a .vue file
The .vue format opens in the following apps, grouped by operating system. If one app does not work, try another from the same list. For a step-by-step walkthrough, see how to open a .vue file.
Windows
- VS Code (Vue extension)
- WebStorm
- any text editor
macOS
- VS Code (Vue extension)
- WebStorm
- any text editor
Linux
- VS Code
- vim
- any text editor
How to convert a .vue file
You can convert a .vue file to js using a conversion tool or the export menu of an app that opens it.
.vue file signature (magic bytes)
Programs recognise a .vue file by the bytes at the start of the file, not by its name. These are the signatures for Vue.
| Hex signature | Offset | Note |
|---|---|---|
| (no fixed signature) | 0 | plain text; no fixed magic bytes |
See the full magic-numbers reference for every format.
Frequently asked questions
What is a .vue file?
A .vue file is a single-file component for the Vue framework. It bundles a component's HTML template, its JavaScript logic and its scoped CSS into one file, each in its own block.
How do I open a .vue file?
Any text editor shows the template, script and style blocks. VS Code with the official Vue extension adds highlighting and type checking.
What is inside a .vue file?
Three sections: a template for the markup, a script for the logic, and an optional style for scoped CSS, all describing one component.
Do I need Vue to use a .vue file?
Yes. The single-file component format is specific to the Vue framework and is compiled by Vue's build tooling.
Related formats
Sources
Details on this page were checked against authoritative references: