The Files of a Vue App

A Vue app is made of several files, and their tabs are above the editor. Let's go through them in the order the browser uses them.

index.html is the page. Its body has just an empty element and a script:

<div id="app"></div>
<script type="module" src="main.js"></script>

Everything you see in the preview, Vue put into #app. type="module" lets the script use import, which you'll see in a moment.

main.js starts the app:

import { createApp } from "vue";
import App from "./App.vue";
import "./style.css";

createApp(App).mount("#app");

A line that starts with import takes something from another file: createApp from Vue, App from the file App.vue (./ means “in the same folder”), and the third line loads the styles in style.css. You'll learn more about import in the lesson Components. The last line creates the app from App and mounts it into #app: Vue shows the app inside that element.

main.js is the same in every exercise of this course, so you won't need to change it.

App.vue is the app itself, and it's where you'll work most of the time. It's a component: a part of the page with its own HTML, JavaScript and CSS, in one file that ends in .vue. Bigger apps are made of many components, and you'll learn to write them in the lesson Components. For now, the whole app is one component, App.

style.css has the styles of the whole app, in CSS as you know it from the CSS course.

A Vue project on your own computer has the same files, plus a few folders. You'll create one in the last lesson.