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

So far, we have enabled the user to change the text anywhere in the resume, but what if the user wants to add a skill to the resume? Or remove one?

For that, we want to add buttons below each 

 element that let the user add or remove list entries. Let's create an EditButtons component for that. We want our component to be called 

.
Let's add two buttons in the template, one with a plus and one with a minus. Each button will get two classes, a general 

 class, and an add or remove specific class so that we can apply a different color.

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.

In order to see the buttons in the resume, we have to import and register the EditButtons component in the 

 component. Let's only add it underneath the list of items in the skills section for now.

Now, we need to add the logic in this component. If the user clicks a button, we must notify the 

 component to adjust the data.
We can apply what we have learned from the 

 component here. We add a click event listener, emit a custom event,
and add an event listener that listens for the custom event in the parent component. 

Let´s take care of emitting the event first. Since a click on the add or the remove button will trigger completely different actions, we need to emit two different events.

 component, we will listen to these events and execute an event handler.
What we want in the add method is that a new entry get pushed to the skills array.
In the remove handler, we want to remove the last entry of the array, which we do with the pop function.

We will do the same in the highlights section.

The description items in the experience and education sections are also arrays, so we can push a “new entry” string or delete the last item in the array here as well. Since experience and education itself are arrays, we first have to locate the correct entry. If we add the EditButtons component in the 

 iteration, the buttons will be rendered in each iteration, and we can access the index from there.

Alternatively, we can access the correct entry with the 

 variable that we made available in each iteration. This points to the current entry and is shorter than accessing via array and index.

Let's test it all out in the browser. Great! The only thing that seems weird is that the remove button is still shown, even when there is no entry left to remove.

 component about whether or not the array contains at least one entry and, based on that, display the remove button or not.

 to the component. The expression checks if the array length is bigger than zero and will therefore evaluate to either true or false. 

 component, we have to explicitly declare it again in the props array, just like we did in the 

In order to only show the button conditionally, we can use the 

 directive gets added to an element and determines whether it gets rendered or not.
This is referred to as 

 in Vue.
If the directive evaluates to a 

 value (in our case, it evaluates to either 

---
title: Adding and removing entries
isPublicLesson: true
privateVideoUrl: https://stream.mux.com/K2B702Ve3SM6IV2Yb6BWnIhfz18hY4kqFoJ2RiTnt02jE.m3u8
description: Add and remove resume entries dynamically by learning how to work with arrays in Vue.js. Learn about conditional rendering with the v-if directive.
code: https://gitlab.com/fullstackio/books/newline-course-apps/katharina-spiecker-build-a-vuejs-resume-app/-/tree/main/lesson-6-starting-code?ref_type=heads
useMdx: true
---

## Adding and removing entries

So far, we have enabled the user to change the text anywhere in the resume, but what if the user wants to add a skill to the resume? Or remove one?

For that, we want to add buttons below each `ul` element that let the user add or remove list entries. Let's create an EditButtons component for that. We want our component to be called `EditButtons`, so we create a file called `EditButtons.vue`.
Let's add two buttons in the template, one with a plus and one with a minus. Each button will get two classes, a general `edit-btn` class, and an add or remove specific class so that we can apply a different color.

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-3" />

In order to see the buttons in the resume, we have to import and register the EditButtons component in the `App` component. Let's only add it underneath the list of items in the skills section for now.

Now, we need to add the logic in this component. If the user clicks a button, we must notify the `App` component to adjust the data.
We can apply what we have learned from the `SectionHeadline` component here. We add a click event listener, emit a custom event,
and add an event listener that listens for the custom event in the parent component. 

Let´s take care of emitting the event first. Since a click on the add or the remove button will trigger completely different actions, we need to emit two different events.

```html
<template>
    <div class="button-wrapper">
        <button class="edit-btn edit-btn-add" @click="$emit('addClick')">+</button>
        <button class="edit-btn edit-btn-remove" @click="$emit('removeClick')">-</button>
    </div>
</template>
```

In the `App` component, we will listen to these events and execute an event handler.
What we want in the add method is that a new entry get pushed to the skills array.
In the remove handler, we want to remove the last entry of the array, which we do with the pop function.

```html
<ResumeSection>
  ...
  <EditButtons @add-click="skills.push('new entry')" @remove-click="skills.pop()"/>
</ResumeSection>
```

We will do the same in the highlights section.

```html
<EditButtons
  @add-click="highlights.push('new entry')"
  @remove-click="highlights.pop()"
/>
```

The description items in the experience and education sections are also arrays, so we can push a “new entry” string or delete the last item in the array here as well. Since experience and education itself are arrays, we first have to locate the correct entry. If we add the EditButtons component in the `v-for` iteration, the buttons will be rendered in each iteration, and we can access the index from there.

```html
<div v-for="(item, index) in experience" :key="index">
  ...
  <EditButtons
    @add-click="experience[index].description.push('new entry')"
    @remove-click="experience[index].description.pop()"
  />
</div>
```

Alternatively, we can access the correct entry with the `item` variable that we made available in each iteration. This points to the current entry and is shorter than accessing via array and index.

Let's test it all out in the browser. Great! The only thing that seems weird is that the remove button is still shown, even when there is no entry left to remove.

We can inform the `EditButtons` component about whether or not the array contains at least one entry and, based on that, display the remove button or not.

For that, we pass the prop `showRemoveBtn` to the component. The expression checks if the array length is bigger than zero and will therefore evaluate to either true or false. `EditButtons` receives this boolean.

```html
<EditButtons
	@add-click="skills.push('new entry')"
	@remove-click="skills.pop()"
	:showRemoveBtn="skills.length > 0"
/>
```

To make the prop available in the `EditButtons` component, we have to explicitly declare it again in the props array, just like we did in the `SectionHeadline` component.

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

In order to only show the button conditionally, we can use the `v-if` directive within the `EditButtons` component.

The `v-if` directive gets added to an element and determines whether it gets rendered or not.
This is referred to as [conditional rendering](https://vuejs.org/guide/essentials/conditional.html) in Vue.
If the directive evaluates to a `truthy` value (in our case, it evaluates to either `true` or `false`), the element gets rendered.

```html
<button
	v-if="showRemoveBtn"
	class="edit-btn edit-btn-remove"
	@click="$emit('removeClick')">
</button>
```

When using `v-if`, you can also use `v-else` on the following element. This element only gets rendered if the `v-if` directive evaluates to `false`.
The element must follow directly, though there can be no element in between.

```html
<button
	v-if="showRemoveBtn"
	class="edit-btn edit-btn-remove"
	@click="$emit('removeClick')">
  -
</button>
<div v-else>No items left to remove</div>
```

Let’s remove this last `div` again because the lack of a remove button is pretty self-explanatory. I just wanted to demonstrate `v-else` because there are many
cases where you will want to use it.

Add and remove resume entries dynamically by learning how to work with arrays in Vue.js. Learn about conditional rendering with the v-if directive.

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

Adding and removing entries