--- title: "Your first Vue component, line by line · vuejs.school" description: "Create a Vue project with one command, read App.vue top to bottom, and build a counter that updates the page. Every line explained." canonical_url: "https://vuejs.school/community/blog/your-first-vue-component" meta: "og:description": "Create a Vue project with one command, read App.vue top to bottom, and build a counter that updates the page. Every line explained." "og:image": "https://vuejs.school/_og/d/a_~WW91ciBmaXJzdCBWdWUgY29tcG9uZW50LCBsaW5lIGJ5IGxpbmUgwrcgdnVlanMuc2Nob29s%2Cc_OgCard.takumi%2Ctitle_~WW91ciBmaXJzdCBWdWUgY29tcG9uZW50LCBsaW5lIGJ5IGxpbmU%2Cdescription_~Q3JlYXRlIGEgVnVlIHByb2plY3Qgd2l0aCBvbmUgY29tbWFuZCwgcmVhZCBBcHAudnVlIHRvcCB0byBib3R0b20sIGFuZCBidWlsZCBhIGNvdW50ZXIgdGhhdCB1cGRhdGVzIHRoZSBwYWdlLiBFdmVyeSBsaW5lIGV4cGxhaW5lZC4%2Ceyebrow_~VHV0b3JpYWwgwrcgNiBtaW4gcmVhZA%2Ctint_mint%2Cp_Ii9jb21tdW5pdHkvYmxvZy95b3VyLWZpcnN0LXZ1ZS1jb21wb25lbnQi%2Cs_czLkrC9pFRhsGVBi.png" "og:image:alt": "Your first Vue component, line by line · vuejs.school" "og:image:height": "600" "og:image:type": image/png "og:image:width": "1200" "og:title": "Your first Vue component, line by line · vuejs.school" "twitter:image": "https://vuejs.school/_og/d/a_~WW91ciBmaXJzdCBWdWUgY29tcG9uZW50LCBsaW5lIGJ5IGxpbmUgwrcgdnVlanMuc2Nob29s%2Cc_OgCard.takumi%2Ctitle_~WW91ciBmaXJzdCBWdWUgY29tcG9uZW50LCBsaW5lIGJ5IGxpbmU%2Cdescription_~Q3JlYXRlIGEgVnVlIHByb2plY3Qgd2l0aCBvbmUgY29tbWFuZCwgcmVhZCBBcHAudnVlIHRvcCB0byBib3R0b20sIGFuZCBidWlsZCBhIGNvdW50ZXIgdGhhdCB1cGRhdGVzIHRoZSBwYWdlLiBFdmVyeSBsaW5lIGV4cGxhaW5lZC4%2Ceyebrow_~VHV0b3JpYWwgwrcgNiBtaW4gcmVhZA%2Ctint_mint%2Cp_Ii9jb21tdW5pdHkvYmxvZy95b3VyLWZpcnN0LXZ1ZS1jb21wb25lbnQi%2Cs_czLkrC9pFRhsGVBi.png" "twitter:image:alt": "Your first Vue component, line by line · vuejs.school" --- > Index of every page on this site: [llms.txt](https://vuejs.school/llms.txt) ## Create the project Node.js is the program that runs JavaScript outside a browser. The project scaffolder needs Node 18.3 or newer; if you are installing it now, pick 22, the active long-term support release. Then run one command in a folder where you keep projects: ``` npm create vue@latest ``` This downloads and runs `create-vue`, the official scaffolding tool. Version 3.13 is current. It prints "Vue.js - The Progressive JavaScript Framework" and asks a series of questions. Answer them like this for now: - Project name: `hello-vue` - Add TypeScript? Yes - Add JSX Support? No - Add Vue Router for Single Page Application development? No - Add Pinia for state management? No - Add Vitest for Unit Testing? No - Add an End-to-End Testing Solution? No - Add ESLint for code quality? No Yes to TypeScript is the only answer that matters here. TypeScript adds types to JavaScript, so your editor can tell you about a mistake before you run anything. In VS Code, install the Vue extension the project recommends (`Vue.volar`, listed in `.vscode/extensions.json`); without it, the editor does not type-check `.vue` files. Everything else can be added later. The 3.13 release also added a `--bare` flag: `npm create vue@latest -- --bare` asks the same questions but leaves out the example components, styles and logo. Keep it for a later project. This time, use the plain command, because the next sections read those example files. ## Start the development server When create-vue finishes, it says "Done. Now run:" and shows three commands: ``` cd hello-vue npm install npm run dev ``` 1. `cd hello-vue` moves into the new project folder. 2. `npm install` downloads the dependencies, including Vue 3.5 and Vite 6. Vite is the development server and build tool: it serves your files to the browser and updates the page when you save. 3. `npm run dev` starts Vite and prints a local address, usually `http://localhost:5173`. Open that address and you will see a welcome page. ## How index.html and main.ts start the app Open the project in your editor. The files that matter for now are in `src/`: - `main.ts` creates the app and attaches it to the page. - `App.vue` is the root component, the one everything else hangs off. - `components/` holds the example components the welcome page is made of. - `assets/` holds CSS and the logo. `index.html` at the project root has one `
` and a script tag that loads `main.ts`. That file is short: *src/main.ts* ``` import './assets/main.css' import { createApp } from 'vue' import App from './App.vue' createApp(App).mount('#app') ``` The first line loads the global styles. `createApp(App)` builds a Vue application whose root component is `App`. `.mount('#app')` renders it into the div with that id. That is the whole bridge between the HTML page and Vue. ## Read App.vue top to bottom A `.vue` file is called a single-file component, or SFC. It keeps the logic, the markup and the styles of one component in one file. The generated `App.vue` is longer than you need, so here is its shape, with the `
` around `HelloWorld` and most of the styles left out: *src/App.vue* ``` ``` Three blocks. Take them one at a time. ` ``` `ref(0)` creates a ref: a small object that holds a value (here the number 0) and lets Vue notice when that value changes. In script you read and change the value through `.value`, so `count.value++` adds one. `@click="increment"` runs the function when the button is clicked. The `@` is short for `v-on:`, which listens for a DOM event. `{{ count }}` is an interpolation: the double braces print a value as text. In the template Vue unwraps the ref for you, so you write `count`, not `count.value`. Now use it. Replace the contents of `App.vue` with something smaller: *src/App.vue* ``` ``` Save, look at the browser, click the button. The number goes up. You did not write any code that finds the button or sets its text. You changed a value, and Vue updated the page. ## What the compiler does with your template A browser cannot run a `