Course introduction to "Build a Vue.js Resume". Prerequisites, course content, and a look at the final product.

Course introduction to "Build a Vue.js Resume"

Get an overview about Vue.js and learn about why Vue is a progressive framework, the different APIs, and the virual DOM.

Why you should learn Vue.js

Learn why Vue.js is essential and a get a sneak-peak of the Resume Builder that you will untimatly create at the end of the this course.

Introduction

How to setup a Vue.js project. Use create-vue to generate a new project. Learn about folder and file structure in Vue.js.

Project setup for building a Vue.js resume

Add basic markup and styling to the resume app. Learn about scoped styling in Vue.js.

Basic markup and styling

How to render data from component state. Learn about Vue.js directives, and reactive rendering.

Component state and rendering data from it

Set up the project and add basic markup and styling for your resume. You will also learn about the template, style, and script section in a Single-File component in Vue.

Project setup & rendering the resume

Make the resume content editable by learning the v-model and the v-on directive, methods, and how to handle events in Vue.js.

Editing the resume content

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

Improving the code structure

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.

Adding and removing entries

Create a Vue.js toggle switch component and toggle the edit mode in the resume builder app.

Toggling edit mode

Make the resume content editable and learn about template directives, component methods, slots, props, conditional rendering, custom events for interacting between components, and class bindings.

Making the resume editable

Make styling configurable with Vue.js class and style binding. Create a color input component, a select component, and more.

Make styling configurable

Configure the photo of the resume builder. Learn how to upload an image as a data url and toggle visibility.

Configuring the photo

Make the resume styling configurable and work on inline style binding and computed properties. Learn how to display, hide, and replace a picture by adding an upload functionality.

Configurable resume styling

Add an export as PDF functionality to the resume builder. Integrate the jsPdf library into your app.

Export resume as PDF

Save the resume configuration by learning about Vue.js lifecycle hooks, localStorage, and JavaScript Blob objects.

Save the resume configuration

Explore the documentation further and try it out in this app.

Where to take it from here

Learn about lifecycle methods to save resume configutaion, and export the resume as a PDF. Learn how you can customize the resume builder further on your own.

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

We have seen how to render data from the data object in the previous lesson. Now, we enable the user to change this data. We will learn two more directives in Vue: 

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.

, with which we can display as well as edit input data.

 sets the value attribute of an input element to the value it is tied to. At the same time, if the user inputs something, this would overwrite the default value in the data object. This is often referred to as two-way data binding.

Without the v-model directive, we would do the data binding and the updating in two steps.

, we can retrieve the value from the data property and display it.

But we also want our input to get registered and update the state. For that, we would need an event listener that listens to the input event.
It should then update the value according to the input.

The way to add event listeners in Vue is with the 

, and then the event you want to listen to.
The value of this directive is the event handler.

When the user types or makes changes to the input's value, the "myEventHandler" method in your Vue component will be called. You can use this to capture the user's input, process it, and perform actions based on the changes in the input field.

 directive can be abbreviated with just a colon?
The 

Just like in Vanilla JavaScript, we can write the event listener inline if we want to. To update the value of the name property on input, we can use the following event handler:

<input :value="name" @input="event => name = event.target.value">

 directive is pretty neat and makes our life a lot simpler. It can be used on 

 elements. So, one approach would be to convert all of our text into input elements and take advantage of the ease of the 

Let’s test this out by converting the first headline into an input element.

Of course, we would have to change the styling of the input element for this to make it look like a headline again. For this, we could remove the background and the border. What we cannot fix is that an input element is only one line long. It cannot break and continue in the next line.

It is best to keep the non-input elements, so 

 on these non-input elements, but we can get the same functionality with v-bind and an event listener.

 to the heading and see what happens. A box renders around the text when we click on it. We can edit the text in the box, and if we hit enter, we see that the box would also span across lines. If we lose the focus, our input remains visible. The data object still needs to be updated.

I will show you what I mean. Let's print out the current value of headline one.

<div>current value of headline one: {{ headlines[0] }}</div>

You see, it does not get updated automatically. If we use an input element with 

<h4 class="section-headline" contenteditable="true">{{headlines[0]}}</h4>
<input v-model="headlines[0]">

---
title: Editing the resume content
isPublicLesson: true
privateVideoUrl: https://stream.mux.com/DqOoHhDlgWaankak02WtfwAkkv00YDI8o1UxIk4btm7Bg.m3u8
description: Make the resume content editable by learning the v-model and the v-on directive, methods, and how to handle events in Vue.js.
code: https://gitlab.com/fullstackio/books/newline-course-apps/katharina-spiecker-build-a-vuejs-resume-app/-/tree/main/lesson-4-starting-code?ref_type=heads
useMdx: true
---

## Editing the resume content

We have seen how to render data from the data object in the previous lesson. Now, we enable the user to change this data. We will learn two more directives in Vue: `v-model` and `v-on`.

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

Vue provides a very useful directive, `v-model`, with which we can display as well as edit input data.

```html
<input v-model="name">
```

:::note

`v-model` sets the value attribute of an input element to the value it is tied to. At the same time, if the user inputs something, this would overwrite the default value in the data object. This is often referred to as two-way data binding.

:::

Without the v-model directive, we would do the data binding and the updating in two steps.

With `v-bind`, we can retrieve the value from the data property and display it.

```html
<input :value="name">
```

But we also want our input to get registered and update the state. For that, we would need an event listener that listens to the input event.
It should then update the value according to the input.

The way to add event listeners in Vue is with the `v-on` directive. You write `v-on:`, and then the event you want to listen to.
The value of this directive is the event handler.

```html
<input :value="name" v-on:input="myEventHandler">
```

When the user types or makes changes to the input's value, the "myEventHandler" method in your Vue component will be called. You can use this to capture the user's input, process it, and perform actions based on the changes in the input field.

Remember how the `v-bind` directive can be abbreviated with just a colon?
The `v-on` directive can be abbreviated with an `@` sign.

```html
<input :value="name" @input="myEventHandler">
```

Just like in Vanilla JavaScript, we can write the event listener inline if we want to. To update the value of the name property on input, we can use the following event handler:

```html
<input :value="name" @input="event => name = event.target.value">
```

The `v-model` directive is pretty neat and makes our life a lot simpler. It can be used on `input`, `textarea`, and `select` elements. So, one approach would be to convert all of our text into input elements and take advantage of the ease of the `v-model` directive.

Let’s test this out by converting the first headline into an input element.

```html
<input type="text" v-model="headlines[0]">
```

Of course, we would have to change the styling of the input element for this to make it look like a headline again. For this, we could remove the background and the border. What we cannot fix is that an input element is only one line long. It cannot break and continue in the next line.

It is best to keep the non-input elements, so `h4` in the case of the headlines, and add `contenteditable="true"` to it. We cannot use `v-model` on these non-input elements, but we can get the same functionality with v-bind and an event listener.

Let's add `contenteditable="true"` to the heading and see what happens. A box renders around the text when we click on it. We can edit the text in the box, and if we hit enter, we see that the box would also span across lines. If we lose the focus, our input remains visible. The data object still needs to be updated.

I will show you what I mean. Let's print out the current value of headline one.

```html
<div>current value of headline one: {{ headlines[0] }}</div>
```

You see, it does not get updated automatically. If we use an input element with `v-model`, it does update.

```html
<h4 class="section-headline" contenteditable="true">{{headlines[0]}}</h4>
<input v-model="headlines[0]">
```

That is because the `v-model` directive updates the data object. To achieve this functionality for our non-input elements, we need to add an event listener that updates the data property of the data object. As a reference point, this code is equivalent to `v-model`.

```html
<input :value="headlines[0]" @input="event => headlines[0] = event.target.value">
```

For a `non-input` element, the difference is that the text is not the `value` of the element but the `innerText`. Therefore, we need to access it with `event.target.innerText` instead of with `event.target.value`.

```html
<h4
  class="section-headline"
  contenteditable="true"
  @input="event => headlines[0] = event.target.innerText">
  {{ headlines[0] }}
</h4>
```

:::warning
If you are using a different browser than Chrome the `input` event might not work as expected. That is because some browsers move the cursor to the beginning of the element after each character is typed, which can disrupt the typing experience.

To prevent this, you can use the `blur` event instead.

For example: `@blur="event => headlines[0] = event.target.innerText"`

This way the event fires once the element you are editing loses focus, which means that the data you type gets saved once you click somewhere else.
To follow along from a browser other than Chrome, use `@blur` instead of `@input` in this course whenever we make text editable.

Katharina

We have seen how to render data from the data object in a previous lesson.

Now we enable the user to change this data.

We will learn two more directives in view.

We model with which we can display as well as edit input data.

We model sets the value attribute of an input element to the value it is tied

At the same time, if the user inputs something,

this would override the default value and the data object.

This is often referred to as two-way data binding.

Without the vModel directive, we would do the data binding and the updating in

With vBind, we can retrieve the value from the data property and display it.

But we also want our input to get registered and update the state.

For that, we would need an event listener that listens to the input event.

It should then update the value according to the input.

The way to add event listeners in view.js is with the vOn directive.

You write vOn colon and then the event you want to listen to.

The value of this directive is the event handler.

When the user types or makes changes to the input's value,

the myEventHandler method, a new view component, will be called.

You can use this to capture the user's input,

process it, and perform actions based on the changes and the input field.

Remember how the vBind directive can be abbreviated with the colon?

The vOn directive can be abbreviated with an add sign.

Just like in vanilla JavaScript, we can write the event listener in line if we

To update the value of the name property on input, we can use the following

The vModel directive is pretty neat and makes our life a lot simpler.

It can be used on input, text, area, and select elements.

So one approach would be to convert all of our text into input elements

and take advantage of the ease of the vModel directive.

Let's test this out by converting the first headline into an input element.

Of course, we would have to change the styling of the input element

for this to make it look like a headline again.

For this, we could remove the background and the border.

What we cannot fix is that an input element is only one line known.

It cannot break and continue into the next line.

It is best to keep the non-input elements, so h4, in the case of headlines,

We cannot use vModel on these non-input elements,

but we can get the same functionality with vBind and in eventless mode.

Let's add content editable true to the heading and see what happens.

A box renders around the text when we click on it.

We can edit the text in the box, and if we hit enter,

we see that the box would also span across lines.

If we lose the focus, our input remains visible.

The data object still needs to be updated.

Let's print out the current value of headline 1.

You see, it does not get updated automatically.

If we use an input element with vModel, it does update.

That is because the vModel directive updates the data object.

To achieve this functionality for our non-input elements,

we need to add an event listener that updates the data property of the data

As a reference point, this code is equivalent to vModel.

For a non-input element, the difference is that the text is not the value of

Therefore, we need to access it with event.target.innerText instead of with

If you have the View Chrome extension installed, you can see the value update

As we can see, the data property updates.

Using a different browser than Chrome, the input event might not work as

That is because some browsers move the cursor to the beginning of the element

after each character is typed, which can disrupt the typing experience.

Let me demonstrate this to you and Firefox.

If I type here, you can see the cursor jumps to the beginning.

To prevent this, you can use the Bloor event instead.

This way, the event fires once the element you are editing loses focus,

which means that the data you type gets saved once you click somewhere adds.

To follow along from a browser other than Chrome,

please use the Bloor event instead of the input event whenever we make text

If you want to use the build and code editors,

please make sure to use the Chrome browser to avoid these cross browser

Now that we have figured out how to edit the data by keeping the rendering of

elements, let's apply it to all headlines.

Instead of repeating the inline event handler for each headline,

moving this logic into a function makes sense.

We do this in view by adding the methods property to the object.

The methods property contains an object with methods.

Our event handler should be placed in there.

In our method, we want to set the value of the specific headline to the inner

DOM node that fired this event. Let's call this method update headline.

In the template, we will replace the inline handler and copy the same

over to all headlines. To pass the event to the handler,

you need to use view special event variable, $ event, and the declaration of

you can name the parameter whatever you like.

We only have to replace the in-next argument.