Adding Components

Create a component

Before we can add a component we must create one. It is normal to use a capital letter to name your components. Let's create a simple Title component.

As we are woking with single file components all components will have a template tag a script tag and a style tag. You can create these your self or use a template already created. You can even just copy the logo component that comes with the install, duplicate it and modify it.

What's important to remember when working with templates is that inside the template tag there must be one parent element that encloses all other elemets otherwise your app will break.

Add a component

There are only 3 things you have to do to add a component so it really is very simple.

Let's go to the page where you want to add the component. Let's put it in the index page.

First you need to import the componet so that the page knows it exists

      import Title from '~/components/Title'
    

Next we need to export the component in our script tag.

      export default {
        components: {
          Title
        },
      }  
    

And finally we need to just add this tag to our html. The tag must be the same name as you called it, in this case Title

      <Title/>