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

One important customization option that needs to be added is replacing the image as well as letting the user choose whether or not to use an image at all.

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.

 component. The ImgUpload component needs an input field of the type file. We explicitly state which file types we accept. In this case, we want to accept all the common image file types. Some browsers use this information to filter the file selection dialog so the user sees only files with the specified extensions.

<template>
    <label>
        Upload Image
        <input
            type="file"
            accept="image/jpeg, image/png, image/jpg"
        >
    </label>
</template>

In order for us to change the photo, we need to add an event listener to the input element. I will call the event handler 

<template>
    <label>
        Upload Image
        <input type="file"
            accept="image/jpeg, image/png, image/jpg"
            @change="changeImage">
    </label>
</template>

Let’s add the event handler method. The handler takes in the event argument and extracts the selected file from it. The 

 object. If a file was selected, we can access that file with an index of 

. If no file is selected, the event will still fire, and the 

 object will be empty. Therefore, we need to check if our 

 contains a value. If so, we create an instance of the 

 is a built-in JavaScript object that allows us to read the contents of files.

, we initiate the process of reading the selected file, and when this is complete, the 

 event fires. In order to react to this event, we register an event listener. We add that listener above the 

 call to make sure that it is available when the 

Once the file is loaded, the reader contains a 

 property with our file as a data URL. A data URL represents the file’s data as an encoded string. You can read more about this 

We will inform our parent component about this value by emitting a custom event with this value.

 component and add it to the bottom of our sidebar.
There, we listen to the 

 of our component’s data object equal to the data url we received.

We are able to upload our image now, but what if we don’t want an image at all?
Personal information is expected in a resume depending on the country, and in some countries, applicants apply without a picture.

Therefore, we will add a configuration option with which the user can choose to display or hide the picture.

---
title: Configuring the photo
isPublicLesson: true
privateVideoUrl: https://stream.mux.com/Aod02eYd4qjD01Ji01pCBH00za01x0041urYEnPbsKLN02pLbQ.m3u8
description: Configure the photo of the resume builder. Learn how to upload an image as a data url and toggle visibility.
code: https://gitlab.com/fullstackio/books/newline-course-apps/katharina-spiecker-build-a-vuejs-resume-app/-/tree/main/lesson-9-starting-code?ref_type=heads
useMdx: true
---

## Configuring the photo

One important customization option that needs to be added is replacing the image as well as letting the user choose whether or not to use an image at all.

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-4-lesson-2" />

### Uploading an image

For that, we will create an `ImgUpload` component. The ImgUpload component needs an input field of the type file. We explicitly state which file types we accept. In this case, we want to accept all the common image file types. Some browsers use this information to filter the file selection dialog so the user sees only files with the specified extensions.

```html
<template>
    <label>
        Upload Image
        <input
            type="file"
            accept="image/jpeg, image/png, image/jpg"
        >
    </label>
</template>
```

In order for us to change the photo, we need to add an event listener to the input element. I will call the event handler `changeImage`.

```html
<template>
    <label>
        Upload Image
        <input type="file"
            accept="image/jpeg, image/png, image/jpg"
            @change="changeImage">
    </label>
</template>
```

Let’s add the event handler method. The handler takes in the event argument and extracts the selected file from it. The `files` attribute will contain a `FileList` object. If a file was selected, we can access that file with an index of `0`. If no file is selected, the event will still fire, and the `FileList` object will be empty. Therefore, we need to check if our `selectedFile` contains a value. If so, we create an instance of the `FileReader`. The `FileReader` is a built-in JavaScript object that allows us to read the contents of files.

With `reader.readAsDataURL(selectedFile)`, we initiate the process of reading the selected file, and when this is complete, the `load` event fires. In order to react to this event, we register an event listener. We add that listener above the `reader.readAsDataURL(selectedFile)` call to make sure that it is available when the `load` event fires.

Once the file is loaded, the reader contains a `result` property with our file as a data URL. A data URL represents the file’s data as an encoded string. You can read more about this [here](https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL).

We will inform our parent component about this value by emitting a custom event with this value.

```html
<script>
export default {
  methods: {
    changeImage(event) {
      const selectedFile = event.target.files[0];
      if (selectedFile) {
        const reader = new FileReader();

        reader.addEventListener('load', () => {
          this.$emit('imageChanged', reader.result)
        });

        reader.readAsDataURL(selectedFile);
      }
    }
  }
}
</script>
```

Katharina

One import customization option that needs to be added is replacing the image,

as well as letting the user choose whether or not to use an image at all.

For that, we will create an image upload component.

The image upload component needs an input field of the type file.

We explicitly state which file types we accept.

In this case, we want to accept all common image file types. Some browsers use

to filter the file selection dialog so the user sees only files with the

In order for us to change the photo, we need to add an event listener to the

I will call the event handler change image.

The handler takes in the event argument and extracts the selected file from it.

The file's attribute will contain a file list object. If the file was selected,

we can access that file with an index of zero. If no file is selected, the

and the file list object will be empty. Therefore, we need to check if our

If so, we create an instance of the file reader.

The file reader is a built-in JavaScript object that allows us to read the

and when this is complete, the load event fires.

In order to read this event, we register an event listener. We add that

dot read as data URL call to make sure that it is available when the load event

Once the file is loaded, the reader contains a result property with our file as

A data URL represents the file's data as an encoded string. We will inform our

about this value by emitting a custom event with this value. We import the

There, we listen to the image changed event and set the image URL of our

We are able to upload our own image now but what if we don't want an image at

Personal information is expected in a resume depending on the country and in

applicants apply without a picture. Therefore, we will add a configuration

the user can choose to display or hide the picture. To toggle the display of

we can use our toggle switch again. Previously, we created this toggle switch

toggling the edit mode. We named the switch edit toggle and used edit toggle

text in there. I want to refactor this component to make it reusable for our

As a first step, we rename edit toggle to toggle switch.

We have to adjust the import statement and the component registration in our

to the new name. Of course, in between our sidebar tags, where we use this

we also need to adjust the tag name to toggle switch.

In our component, we change the event name from edit mode to toggle to switch

We adjust the event we listen to in the app component accordingly.

The label edit mode is currently hard-coded into the template. We need to make

to be adjustable. We register a prop with the name label and print it out in

In the app components template, we pass it in as a static string.

Right, we have refactored our component and you can try it out. The edit toggle

Now, we can reuse this component for hiding or showing the photo.

We reuse the component toggle switch in the sidebar. I will just copy it and

the photo upload part. The label needs to be changed. I will choose show photo

Of course, we also need to use a different event handler.

I will call the new one toggle image display and we will add a new method for

For default, the image should be shown, so we set the default to true.

Just like with the toggle edit mode method, we receive the boolean value from

and can use this to reset the properties value.

Of course, we also need to display or remove the image, depending on this value

To have our sidebar content a bit more organized, I will move the photo related

We have the show photo toggle switch, the upload image option and the photo

The letter 2 only makes sense if the photo is shown, so we add the vif

So, we can now toggle whether or not we want to show an image, as well as

As a final step, I want to clean up this messy sidebar a bit.