Full-Stack Web Development with Vue.js and Node

Building the Real Application Chapter 5

router,

template: '<App/>',

components: { App },

});

The first three lines import the necessary packages required for this app to run. App.vue is

the main template layout for this app. All other .vue files will extend this layout.

The bottom block defines which component to render when you run the app. In this
case, this is telling our app to take the template and render it inside

the #app element. Now, if we look into App.vue:

<template>

<div id="app">

<img src="./assets/logo.png">

<router-view/>

</div>

</template>

<script>

export default {

name: 'app',

};

</script>

<style>

#app {

font-family: 'Avenir', Helvetica, Arial, sans-serif;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

text-align: center;

color: #2c3e50;

margin-top: 60px;

}

</style>

Here we have the template that has a div element with an ID #app. It means that the vue

templates that we create will get rendered in this.