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.
What opens 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.
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
Open a .vue file step by step
- Confirm the file really is a .vue. Drop it into the WhatFileType identifier, which reads its signature in your browser without uploading anything.
- On Windows, open it with VS Code (Vue extension) or WebStorm.
- On Mac, use VS Code (Vue extension) or WebStorm.
- On Linux, try VS Code or vim.
- Still stuck? Convert the .vue to js, which opens more widely.
Why can't I open my .vue file?
Almost always because no installed app understands Vue. Install one of the apps above, or convert the file to a format your existing software already reads. If double-clicking opens the wrong program instead of nothing at all, the file association is set to the wrong app rather than the file being broken.
The other possibility is that the file is not really a .vue at all. Drop it into the file identifier to check it by its bytes instead of its name. Nothing is uploaded.
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 has no fixed magic number, so there is no signature table on this page. Its bytes alone do not prove the format: identification relies on the extension, the structure of the content and the program that created it. The magic-numbers reference lists the formats that do carry one.
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. How sources are ranked and what is deliberately left out is set out in the methodology.