.vue File Extension
.vue file contains, which editors open Vue components, how Poly supports them, and when to use another web file format. File extension details for .vue
Full Support| File type | Vue Single-File Component |
|---|---|
| MIME type | |
| Encoding | Unicode text, usually UTF-8, with HTML-like component blocks |
| Operating systems | Windows, macOS, Linux |
| Opens with | Visual Studio Code with Vue - Official, WebStorm, Sublime Text, Vim or Neovim |
| Poly support | Yes. Poly provides source-code support for .vue components. |
| Indexed by Poly | Yes. Poly indexes readable component source for exact and meaning-based search. |
| Preview in Poly | Yes. .vue files open in Poly's code-friendly text editor. |
| Poly agent | Yes. The Poly agent can read and reason about the component source. |
What kind of file is a .vue?
A .vue file is a Vue Single-File Component, usually shortened to SFC. It keeps a component's markup, JavaScript or TypeScript logic, and CSS in one text file. Vue's specification calls the syntax HTML-compatible, but a .vue file is source code for Vue tooling rather than a standalone webpage.1
The usual top-level blocks are <template>, <script>, and <style>. A component can have at most one <template>, one ordinary <script>, and one <script setup>, while multiple <style> blocks are allowed. Blocks can select preprocessors with attributes such as lang="ts" or lang="scss".1
There is no fixed magic number. A useful content check looks for the expected top-level blocks and parses them according to the SFC specification. Because the file is text, its first bytes depend on comments, whitespace, and which block the author places first.
.vue files are commonly handled as source text, and Poly classifies the suffix as text/plain.2How do I open a .vue on my computer?
Open .vue files in a code editor on Windows, macOS, or Linux. The Vue team recommends Visual Studio Code with the Vue - Official extension, which adds syntax highlighting, template-aware completion, and TypeScript support. WebStorm has built-in SFC support, while editors with Language Server Protocol support can use Volar-based tooling.3
To run the component, open it as part of a Vue project configured with a build tool. Vite has first-class SFC support, and webpack projects can use vue-loader. A web browser cannot use the source file directly as a normal HTML page. Vue's compiler turns the component into standard JavaScript and CSS for the application.34
Poly support for .vue
Poly recognizes .vue as readable source text. It opens the file in a code-friendly editor, indexes the component source for exact and meaning-based search, and makes that source available to the Poly agent. This helps you find a component by its template copy, props, methods, imports, or styles.
Poly does not build or execute the component. Preview shows source rather than the rendered interface, so use the project's development server when you need to inspect runtime behavior.
History of .vue
Evan You created Vue in 2014. It began as a personal project and later became an independently maintained, community-driven framework.5 The .vue convention grew into one of the framework's defining features because it colocates the parts of a user-interface component while still allowing each block to use its own language and tools.
Vue now recommends SFCs for single-page applications, static-site generation, and other substantial frontends where a build step is appropriate.4 The extension belongs to the Vue ecosystem; it is not related to similarly named image viewers or to a generic HTML standard.
Working with .vue and alternatives
Choose the representation that fits the project:
| Format | Best fit | Main tradeoff |
|---|---|---|
.vue SFC | A reusable Vue component | Requires Vue-aware build tooling |
.html | A standalone page or server-rendered template | No SFC compilation or component-scoped features |
.js or .ts | Render functions, composables, and framework logic | Template and styles live elsewhere or in code |
.jsx or .tsx | Vue components authored with JSX | Uses JavaScript syntax instead of SFC templates |
Do not convert a .vue file by merely renaming it. To produce deployable files, build the Vue project. To split an SFC for maintenance, move the template, script, or style into an appropriate file and reference it with the block's src attribute, which the SFC specification supports.1
.vue file can contain executable JavaScript or TypeScript and can import dependencies. Reading it as text is safe, but building or running an unfamiliar project may execute scripts from the project or its toolchain. Review the source and dependency configuration first.Footnotes
- Vue.js. SFC Syntax Specification. Defines the
.vueconvention, top-level blocks, preprocessor languages, andsrcimports. ↩ ↩2 ↩3 - Internet Assigned Numbers Authority. Media Types Registry. The registry includes
text/plainbut no Vue-specific subtype. ↩ - Vue.js. Tooling. Documents recommended editors, Vue - Official, Vite,
vue-loader, and SFC type checking. ↩ ↩2 - Vue.js. Single-File Components. Explains SFC benefits, recommended uses, and compilation to standard JavaScript and CSS. ↩ ↩2
- Vue.js. Frequently Asked Questions. Identifies Evan You as Vue's creator and 2014 as its creation year. ↩