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 

. 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 first component we will create will be called 

. We navigate in the component folder and create a file with the name 

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 

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

<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>
	<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 

 component and register it in the components object. The 

 explains that this is necessary to make our component available as a tag.

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 

<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.

The section headlines are another part of the 

 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 

 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.

<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 

 component. We have to pass this information to the 

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 

 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.

 component, we have to state which props we expect explicitly. You can do this with an array containing the prop names as strings or an object. If you don't tell Vue which props you are expecting, the prop won't be available in your component. You can read more about explicit props declaration 

---
title: Improving the code structure
isPublicLesson: true
privateVideoUrl: https://stream.mux.com/Zhg2ZhTV00SPt2KWe2gi3QvDV010227G6wufxvCglfKlqU.m3u8
description: Create Vue.js single file components and learn about slots, props, and custom events.
code: https://gitlab.com/fullstackio/books/newline-course-apps/katharina-spiecker-build-a-vuejs-resume-app/-/tree/main/lesson-5-starting-code?ref_type=heads
---

## 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](https://vuejs.org/guide/essentials/component-basics.html#defining-a-component). 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.

### 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](https://vuejs.org/guide/components/slots.html#slot-content-and-outlet) tag.

```html
<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.

```html
<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](https://vuejs.org/guide/essentials/component-basics.html#using-a-component) explains that this is necessary to make our component available as a tag.

```javascript
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`.

```html
<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.

```html
<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.

```html
<SectionHeadline headline="Test Headline" />
```

To use the prop in the `SectionHeadline` component, we have to state which props we expect explicitly. You can do this with an array containing the prop names as strings or an object. If you don't tell Vue which props you are expecting, the prop won't be available in your component. You can read more about explicit props declaration [here](https://vuejs.org/guide/components/props.html#props-declaration).

```javascript
<script>
    export default {
        props: ["headline"]
	}
</script>
```

```html
<template>
    <h4 class="section-headline" contenteditable="true">{{ headline }}</h4>
</template>
```

Now, you can see that the headline is displayed correctly.

The child component does not need to know the entire `headlines` array. For displaying the headline it only needs the headline at a specific index.
For this, we can use the v-bind directive again, which allows us to reference data from the data object as the attribute value.
The JavaScript expression will be evaluated and then a value, so in our case the headline that exists at index 0 of the headlines array will be passed along as a prop.

Katharina

Create Vue.js single file components and learn about slots, props, and custom events.

Improving the code structure

Before we move on to adding more features, you might have noticed that this

If your app is only small, keeping all the code in one component might work.

But the more features you're going to add, the harder it is going to be to

This 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

Additionally, it will make the code more readable.

The first component we will create will be called "Resume section".

We navigate in the component folder and create a file with the name "Resume

This component serves purely as a layered component and does not add

It will only need a template section and a style section, now script necessary.

The goal is to render the resume content just like we did before,

but instead of wrapping content in diff class resume section directly, we want

to wrap it in the resume section component.

Therefore, we need a way to pass content into a component.

The slot makes sense once you see how it is used.

Anything between the opening and the closing tags of the component will be

It allows us to split up content in a way that makes components more reusable.

I can pass in anything I want, a headline, a button, etc.

And the resume section component does not need to know.

But before we can use our component, we have to import it within the script tag

In our app component, we import the resume section component and register it in

The view documentation explains that this is necessary to make our component

Now that we have registered our component, we can use the tag in the template.

I am going to wrap everything that was wrapped in diff resume section into the

As you can see, it gets rendered just like before, which means that view passes

the inner content of the component into the slot.

The section headlines are another part of the app template that would do well

It is always the same markup in styling, and we want to reduce the amount of

By creating a component for it, we can isolate the markup in styling for the

headline and reuse the same component instead of repeating the code.

We want our component to be called section headline, so we create a file called

First, we copy over the markup from app.view that we want this component to

The index and the headline array is different for every headline. The zero can

Our component also does not know about the headline's array. This data lives in

We have to pass this information to the section headline component to display

For this, we have props in view. Props are like variables that you pass down

These variables contain a value. We are going to be using sectionheadline in

our app component, which makes up the parent component and sectionheadline the

In the app component, we have to import sectionheadline and register it in the

Now we can use it in the template. To pass down a prop, you add an attribute

You will be able to access the value of the attribute, for example test

To use the prop and the sectionheadline component, we have to state which props

You can do this with an array containing the prop names as a string.

If you don't have view which props you are expecting, the prop won't be

You can read more about explicit prop declaration in the view documentation.

Now you can see that the headline is displayed correctly.

The child component does not need to know the entire headline's array.

For displaying the headline, it only needs the headline at a specific index.

For this, we can use the vbind directive again, which allows us to reference

data from the data object as the attribute value.

The JavaScript expression will be evaluated and then a value, so in our case

the headline that exists at index 0 of the headline's array, will be passed

We are displaying the headline, but we are not saving the result of the

Because the app holds all the data for the resume, we need to inform the app

component about changes in the headline text, in case the user edits it.

For that, we add a method where we emit a custom event called headline editor.

To emit custom events, view provides the emit's function, which you can call

Along with the event name, we can pass a value that the listener will receive.

The app component needs to know the new value of the headline. The new value

can be accessed with inner text of the node that triggered the event.

Therefore, we pass this information along.

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Masterclasses

Tutorials

Fullstack React with TypeScript