Improving the code structure

Before we move on to adding more features, you might have noticed that this file is getting bigger and bigger. If your app is only small, keeping all the code in one component might work. But the more features you are going to add, the harder it is going to be to maintain the code like this. That is why we want to split the code up into components. If you create a component that you can reuse, you will have to repeat less code, and it will be easier to maintain. Additionally, it will make the code more readable.

The code editor contains the final code from the previous lesson. Feel free to use it as a starting point to dive into this lesson.

Creating a resume section component#

The first component we will create will be called ResumeSection. We navigate in the component folder and create a file with the name ResumeSection.vue.

This component serves purely as a layout component and does not add functionality. It will only need a template section and a style section. No script necessary.

The goal is to render the resume content just like we did before, but instead of wrapping content in div class="resume-section" directly, we want to wrap it in the ResumeSection component.

Therefore, we need a way to pass content into a component. For this, Vue provides the slot tag.

xxxxxxxxxx

<template>

    <div class="resume-section">

        <slot></slot>

    </div>

</template>

​

<style scoped>

.resume-section {

  margin-bottom: 30px;

}

</style>

The slot makes sense once you see how it is used. Anything between the opening and closing tags of the component will be displayed instead of the slot tags. It allows us to split up component content in a way that makes components more reusable. I can pass in anything I want, a headline, a button, etc, and the ResumeSection component does not need to know.

xxxxxxxxxx

<ResumeSection>

    <h3>Example title</h3>

    <p>Example description</p>

</ResumeSection>

But before we can use our component, we have to import it within the script tag. In our App component, we import the ResumeSection component and register it in the components object. The Vue documentation explains that this is necessary to make our component available as a tag.

xxxxxxxxxx

import ResumeSection from './components/ResumeSection.vue';

​

export default {

    components: {

      ResumeSection

    },

    data() {...}

    ...

}

Now that we have registered the component, we can use the tag in the template. I am going to wrap everything that was wrapped in div.resume-section into ResumeSection.

xxxxxxxxxx

<ResumeSection>

    <h4 contenteditable="true" @input="updateHeadline($event, 0)">{{headlines[0]}}</h4>

    <p contenteditable="true" @input="updateProperty($event, 'introText')">{{ introText }}</p>

</ResumeSection>

As you can see, it gets rendered just like before, which means that Vue passes the inner content of the component into the slot.

Creating a section headline component#

The section headlines are another part of the App.vue template that would do well as a component. It is always the same markup and styling, and we want to reduce the amount of markup and styling in our App component. By creating a component for it, we can isolate the markup and styling for the headline and reuse the same component instead of repeating the code.

We want our component to be called SectionHeadline, so we create a file called SectionHeadline.vue. First, we copy over the markup from App.vue that we want this component to display.

xxxxxxxxxx

<template>

    <h4 class="section-headline" contenteditable="true" @input="updateNestedProperty($event, 'headlines', 0)">{{headlines[0]}}</h4>

</template>

The index in the headline array is different for every headline. The 0 can, of course, not stay there. Our component also does not know about the headlines array. This data lives in the App component. We have to pass this information to the SectionHeadline component to display it from there.

For this, we have props in Vue. Props are like variables that you pass down from the parent to the child component. These variables contain a value. We are going to be using SectionHeadline in our App component, which makes App the parent component and SectionHeadline the child component. In the App component, we have to import SectionHeadline and register it in the components object. Now, we can use it in the template. To pass down a prop, you add an attribute with the name of the prop. You will be able to access the value of the attribute “Test Headline”, for example, in the child component.

xxxxxxxxxx

<SectionHeadline headline="Test Headline" />