Drop any file to identify it
No upload. No signup. No sending your file halfway across the internet.
We tell you what it is, right here in your browser.
Drop it!
Let go to identify this file.
Couldn't identify this file
Need to convert it? fwip it →
Vue single-file components are the format that made component-based development feel natural. A .vue file has three sections: `<template>` for HTML, `<script>` for logic, and `<style>` for CSS. Everything about one component — how it looks, how it behaves, how it's styled — lives in one file. Open it and you understand the whole component at a glance.
The format requires a build step — Vue's compiler (via Vite, vue-cli, or webpack) transforms .vue files into JavaScript that browsers can execute. The `<style scoped>` feature automatically scopes CSS to the component, preventing style leaks. The `<script setup>` syntax (Vue 3) makes the JavaScript section remarkably concise.
VS Code with the Vue Language Features extension (Volar) provides syntax highlighting, type checking, and auto-completion for .vue files. WebStorm has built-in Vue support. Any text editor can open .vue files — they're plain text — but IDE support matters more here than for most file types because the file contains three different languages.