Course introduction to "Build a Vue.js Resume"

Why you should learn Vue.js

Introduction

Project setup for building a Vue.js resume

Basic markup and styling

Component state and rendering data from it

Project setup & rendering the resume

Editing the resume content

Improving the code structure

Adding and removing entries

Toggling edit mode

Making the resume editable

Make styling configurable

Configuring the photo

Configurable resume styling

Export resume as PDF

Save the resume configuration

Where to take it from here

Exporting the pdf, saving the configuration, further steps

A resume that you created on a **Vue.js Resume Builder**, a Vue.js Resume Builder that **YOU** created! Now **THAT’s** the good stuff. That’s that stuff that distinguishes **YOU** from the flock of **“Word” and “PDF”**.

### 5 Reason for Creating your Resume Builder in Vue

1. Vue.js is very **performant**: It works with a virtual DOM, a lightweight representation of the actual DOM. It allows Vue to optimize updates and significantly improves performance.

2. With its component-based development, Vue helps **structure code**, which makes maintaining it easier.

3. Vue.js simplifies the **rendering of content** immensely: When your data changes, the connected part of the DOM automatically re-renders.

4. Vue is a **progressive framework**: That means you can introduce Vue into an existing project. You don't have to rewrite everything, instead, you can only use Vue for a specific page or section of your project.

5. It is **open-source**, and you can be sure that it will be continued due to its popularity.

### Overcoming Challenges in Vue and Developing a Resume Builder

If you are already familar with CSS, HTML, and JavaScript, with the gentlest learning curve, Vue is your doorway into a fully-fledged front-end or even a full-stack web developer.

Mastering Vue can present a learning curve for absolute beginners unfamiliar with CSS, HTML, and JavaSrcript, this is due to its extensive features and concepts like data properties, methods, computed properties, custom events, and lifecycle hooks. While Vue offers excellent [documentation](https://vuejs.org/guide/introduction.html), it can be challenging for developers to get a deeper understanding without a structured learning path.

The best way to familarize yourself with a new framework is to work on a portfolio project, and this course is exactly that. You won't find anything about creating a portfolio project in any offical documentation. This course also provides a **structured learning path**, breaking down complex concepts into manageable lessons.

Our aim is to ensure that you progressively build your understanding of Vue, starting from the basics and advancing to more complex topics. And thus, this course is tailored for Vue.js beginners, leveraging the Options API in Vue 3 for its **beginner-friendly** approach.

We emphasize practical application as the most effective way to become familiar with the material, ensuring you apply newly introduced concepts from the course's very first lesson. Instead of practicing on simple to-do list apps, you have the opportunity to create a substantial portfolio project that you can showcase to friends, potential employers, and even use for yourself to create a Developer Resume.

### Course Content Overview
Course Overview:
Total Modules: **5**
Total Lessons: **14**
Total Video Runtime: **1 hour, 30 minutes**

Enhance your Portfolio with a Kickass Vue 3 Resume Builder

“**Word” or “PDF” resume pfft!** You’re better than that and you know it. In this course, you will create a **customizable developer resume from scratch in Vue.js** with features and tools to make meaningful changes in the content and the design of your developer resume.

This course will also teach you all the fundamental concepts of Vue, with code-along video lessons, detailed explanations, and hands-on exercises. By the end of the course, you'll have a deep **understanding of Vue**, a **stylish developer resume**, and a **portfolio project** that demonstrates your Vue knowledge.

Interactive Vue.js Resume Builder

Creating a highly configurable and customizable Resume Bilder in Vue

Setting up Vue projects with the Single File Components architecture

Component reactivity and dynamic data rendering with Vue directives

Computed properties and component methods

Communication between components via props and custom events

Conditional styling through class and inline style bindings

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 code editor contains the final code from the previous lesson. Feel free to use it as a starting point to dive into this lesson.

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.

---
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
useMdx: true
---

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

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.

<ReplitEmbed src="https://replit.com/@newlineauthors/module-3-lesson-2" />

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

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

Learn

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

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Interactive Vue.js Resume Builder

Module 1: Introduction

Introduction:

Start Here

Lesson 1: (3:31)

Course introduction to "Build a Vue.js Resume"

Lesson 2:

Why you should learn Vue.js

Module 2: Project setup & rendering the resume

Lesson 1: (8:14)

Project setup for building a Vue.js resume

Lesson 2: (9:20)

Basic markup and styling

Lesson 3: (13:45)

Component state and rendering data from it

Module 3: Making the resume editable

Lesson 1: (16:31)

Editing the resume content

Lesson 2: (17:15)

Improving the code structure

Lesson 3: (17:43)

Adding and removing entries

Lesson 4: (12:33)

Toggling edit mode

Module 4: Configurable resume styling

Lesson 1: (33:10)

Make styling configurable

Lesson 2: (12:05)

Configuring the photo

Module 5: Exporting the pdf, saving the configuration, further steps

Lesson 1: (22:19)

Export resume as PDF

Lesson 2: (10:50)

Save the resume configuration

Lesson 3: (2:21)

Where to take it from here

Improving the code structure