Components and views

Now we need to put some order into our application. In a real situation, we shouldn't have all the code inside App.vue because it's supposed to be the entry point of the website. To start code-splitting, we'll need to create some dedicated files that will handle our work.

Components

Components are reusable Vue instances with a name. This name create a custom HTML element wich you can use on your vue file. For example, a film-list component, works with the custom element <film-list>. Syntax of a Vue component :

<template>
  <div class='HelloWorld'>
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
  export default {
    name: 'Welcome to the film list',
    props: {
      msg: '',
    },
  };
</script>

But how to create it ? Let's go in your src file, create a new folder called components and create into a new file: FilmList.vue Copy all content of your App.vue and paste it on your new FilmList.vue inside a div class="content". Go back to your App.vue, on your script tag, import your component with:

import FilmList from '@/components/FilmList.vue';

On your export default{}, you can delete the data function, because the data is now on your component. Declare your component thanks to components object:

components: {
    FilmList
}

The script tag of App.vue contains after all:

<script>
import FilmList from '@/components/FilmList.vue';

export default {
    components: {
        FilmList
    }
}
</script>

You can now use your FilmList component ! Delete the contents of the template tag and declare your new component film-list.

<template>
    <div class='container'>
        <film-list></film-list>
    </div>
</template>

Refresh your navigator and, surprise... nothing changes! That's actually a good news, as it means your component works properly.

Components can be reused as many times as you want, even inside the same view. The data function will be different and a compenent works alone, the interaction with one does not impact others.

Advanced

Great, we created our first component and integrate it to our page. This allows us to display all the movies, let's continue and make this component a little more difficult. Let's create a searchbar, with this new functionality we will use different directives previously presented, v-model, v-if, v-else.

Let's add our search bar, on our FilmList.vue , just after the div class="content", create an input type search, add searchBar class and a v-model named searchKey, your input tag it's normaly like that.

<template>
  <div class='content'>
    <!-- SearchBar -->
    <input
      v-model='searchKey'
      type='search'
      placeholder='Search a movie, serie...'
      class='searchBar'
    />
<!-- ... -->

We need to initialize searchKey on our script data just bellow the film declaration.

export default {
  data() {
    return {
      film: films.film,
      searchKey: '',
    };
  }
}

Views

In a Vue app, views is one of the most important folder in the application. Here all the entry points, pages are created. For example, in your application there is Home, About and Contact pages, in the views folder you should have Home.vue, About.vue, Contact.vue. But how to implement it ?

On your src file, create a new folder called views and inside it you'll create into a new file: Home.vue. This file will be the homepage of your project. All the .vue files have the same architecture, so copy template , script and their contents of your App.vue and insert it in your new Home.vue. Add this code to replace the template tag of your App.vue

<template>
  <div id='app'>
    <div id='nav'>
      <router-link to='/'><h1>VUEFLIX</h1></router-link>
      
      <div class='nav_link'>
        <router-link to='/'>Home</router-link>
      </div>
    </div>

    <router-view />
  </div>
</template>

At this part you create your first view ! Awesome, but how to use and display it on your site ? We will see this part on the next page.