Learn TypeScript 3 by Building Web Applications

Creating the skeleton

Let's create our home view. At first, we'll keep it really basic. We just need to introduce it for now (you'll see why in a minute) but don't worry, as we will come back to it real soon.

Go ahead and create a src/views/Home.vue file.

Add the following code to it:

<template>  <div class="lf-home-vue">    <h1>LyricsFinder v1 - Home</h1>    <span>Coming soon...</span>  </div></template><script lang="ts">  import {Component, Vue} from 'vue-property-decorator';  @Component({})  export default class Home extends Vue {    // Lifecycle hook    public mounted() {      console.log('Home component mounted');    }  }</script><style scoped></style>

As you can see, this is a simple SFC.

Let's put it aside for now and see how we can display it.