Vue Files & The Root Component

Vue Files & The Root Component

In a Vue CLI project, components are written as .vue files — single-file components that combine the template, script, and styles in one file. The root component is App.vue.

Anatomy of a .vue File

<template>
    <div id="app">
        <h1>{{ title }}</h1>
        <p>{{ greeting }}</p>
    </div>
</template>

<script>
export default {
    name: 'App',
    data() {
        return {
            title: 'My Vue App',
            greeting: 'Welcome!'
        };
    }
};
</script>

<style>
#app {
    text-align: center;
    color: #2c3e50;
    font-family: 'Avenir', sans-serif;
}
</style>

The Three Sections

Section	Purpose
<template>	The HTML markup — must have a single root element (in Vue 2)
<script>	The JavaScript — exports a component options object
<style>	The CSS — can be scoped to this component

How main.js Bootstraps the App

// src/main.js
import Vue from 'vue';
import App from './App.vue';

Vue.config.productionTip = false;

new Vue({
    render: h => h(App),
}).$mount('#app');

The entry point creates a Vue instance that renders the App component and mounts it to the #app div in public/index.html.

export default

export default {
    name: 'App',
    data() { return { ... }; },
    methods: { ... },
    computed: { ... }
};

Each .vue file exports a component options object using export default. The name property is used for debugging and Vue DevTools identification.

Key Takeaways

• .vue files have three sections: <template>, <script>, and <style>
• The template must have a single root element in Vue 2
• main.js creates the root Vue instance and mounts App.vue to the DOM
• Components use export default to expose their options object