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 given the user many configuration options for their resume as well as the ability to edit all the texts.
In the previous lesson, we gave the user the ability to export the resume as a PDF.

The only thing we still need for a great app is the ability to save the resume.
The user might not want to export the resume right away, for example, because they still have to decide on which skills to include in the resume or which colors to choose. We have to give the user the ability to save the current state of their resume.

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.

For that, we will add a button that will save the configuration in the 

 of the browser, not to be confused with the 

, can save information even after a tab or window is closed. 
Once the user reopens the page, they will find their resume to have the same text, sections, and configuration
as it did when they saved it. This approach is very privacy-friendly: The resume contains sensitive data such as name, phone number, and address, and we don't want this data
to reach the wrong hands. By saving it in the user's browser, there is no chance of someone getting access to that data.
The data saved in 

 can only be accessed within the same browser that it was saved and only within the same website that stored it there.
If you have another tab with the domain "anotherdomain.com" open, for example, this script cannot access data in the 

One limitation is that the persisting and accessing of the data does not work across browsers. That is because each browser has its own 

.
If you save data in Chrome and then open the page in Safari, Safari won't know about the configuration saved in the 

 of Chrome.
When the user saves the data in incognito mode, the data is automatically cleared when the user closes the private browsing session.

 has a size limit of about 5-10 MB, depending on the browser, but this won't be a problem for resume configuration data.

To trigger the action of saving the current resume state to 

 we first add a button above the resume.
We can use our 

<CustomButton
    btn-type="primary-right"
>
    Save configuration in browser
</CustomButton>

---
title: Save the resume configuration
isPublicLesson: true
privateVideoUrl: https://stream.mux.com/v02eFfzNWqTNTp8g02s01102kYhdZqowbR2Q3F2hJ25AM2o.m3u8
description: Save the resume configuration by learning about Vue.js lifecycle hooks, localStorage, and JavaScript Blob objects.
code: https://gitlab.com/fullstackio/books/newline-course-apps/katharina-spiecker-build-a-vuejs-resume-app/-/tree/main/lesson-11-starting-code?ref_type=heads
useMdx: true
---

## Save the resume configuration

We have given the user many configuration options for their resume as well as the ability to edit all the texts.
In the previous lesson, we gave the user the ability to export the resume as a PDF.

The only thing we still need for a great app is the ability to save the resume.
The user might not want to export the resume right away, for example, because they still have to decide on which skills to include in the resume or which colors to choose. We have to give the user the ability to save the current state of their resume.

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

### Saving the configuration in localStorage

For that, we will add a button that will save the configuration in the `localStorage`. The `localStorage` of the browser, not to be confused with the `sessionStorage`, can save information even after a tab or window is closed. 
Once the user reopens the page, they will find their resume to have the same text, sections, and configuration
as it did when they saved it. This approach is very privacy-friendly: The resume contains sensitive data such as name, phone number, and address, and we don't want this data
to reach the wrong hands. By saving it in the user's browser, there is no chance of someone getting access to that data.
The data saved in `localStorage` can only be accessed within the same browser that it was saved and only within the same website that stored it there.
If you have another tab with the domain "anotherdomain.com" open, for example, this script cannot access data in the `localStorage` that it did not save there itself.

One limitation is that the persisting and accessing of the data does not work across browsers. That is because each browser has its own `localStorage`.
If you save data in Chrome and then open the page in Safari, Safari won't know about the configuration saved in the `localStorage` of Chrome.
When the user saves the data in incognito mode, the data is automatically cleared when the user closes the private browsing session.

The data in `localStorage` has a size limit of about 5-10 MB, depending on the browser, but this won't be a problem for resume configuration data.

To trigger the action of saving the current resume state to `localStorage` we first add a button above the resume.
We can use our `CustomButton` component for that.

In App.vue

```javascript
<CustomButton
    btn-type="primary-right"
>
    Save configuration in browser
</CustomButton>
```

In CustomButton.vue

```css
.btn-primary-right {
  background-color: var(--color-black);
  color: white;
  width: auto;
  margin-left: auto;
  margin-bottom: 20px;
}

.btn-primary-right:hover {
  background-color: var(--color-black);
}
```

On click, we will call a method with the name `saveConfig`.
We add this method to the methods object. A quick recap on how to work with `localStorage`.
You can only save strings to `localStorage`. If you want to store other data types (e.g. objects),
you need to serialize them to strings before storing and deserializing them when retrieving.
You set the value by calling the `setItem` method on `localStorage`.
The first argument is the key under which we want to store the value, and the second argument is the string value we want to store.

Katharina

We have given the user many configuration options for their resume as well as

In the previous lesson, we gave the user the ability to export the resume as a

The only thing we still need for a great app is the ability to save the resume.

The user might not want to export the resume right away, for example, because

they still have to decide on which skills to include in the resume, or which

We have to give the user the ability to save the current state of their resume.

For that, we will add a button that will save the configuration in the local

The local storage of the browser, not to be confused with the session's storage

, can save information even after a tap or window is closed.

Once the user reopens the page, they will find the resume to have the same

exact text, sections and configuration as it did when they saved it.

The resume contains sensitive data, such as name, phone number and address, and

we don't want this data to reach the wrong hands.

By saving it and the user's browser, there is no chance of someone getting

The data saved in local storage can only be accessed within the same browser,

that it was saved and only within the same website that started there.

One limitation is that the persisting and accessing of the data does not work

That is because each browser has its own local storage.

If you save data on Chrome and then open the page in Safari, Safari won't know

about the configuration saved in the local storage of Chrome.

Likewise, when the user saves the data in a cognitive mode, the data is

automatically cleared when the user closes the private browsing session.

The data in local storage has a size limit of 5 to 10 megabytes depending on

the browser, but this won't be a problem for the resume configuration data.

To trigger the action of saving the current resume state to local storage, we

We can use our custom button component for that.

Since we want to store the entire configuration object, we must convert it into

We can access the reactive data object from within the component with this dot

Let's inspect this value first in the console.

As you can see, the data object as a JSON string gets locked.

We will store this value in the local storage with the key resume.

You can see the value stored in the local storage with Chrome DevTools and the

As you can see, the configuration was saved.

The second part of this is that upon opening the page, we want our app to check

if there is a configuration pre-safe, and if so, replace the default

We want to run this logic ideally before the page renders the default

To hook into this early phase of the components lifecycle, you provide life

View components have a life cycle that determines the sequence of events they

go through, from initialization to the structure.

These lifecycle methods allow us to hook into specific points in a component's

In the view documentation, you see which lifecycle hooks are available.

We want to hook an early in the application lifecycle.

The first hook available to us, since we are using the options API, is the

This hook gets executed before the mounted hook, which is when the component

Since our requirement is that we want to update the components data before it

gets rendered, this hook should work for us.

We use the created hook by adding a method to our component with the name of

Be careful, this method does not go into the methods object though.

I will add it at the very top of our component.

The code inside that method will then be executed when the created hook is

In the created hook, we retrieve the configuration from the local storage and

save the value to our saved resume variable.

If this value is not null, we want to pass the JSON string to get the

We want to encapsulate the process of parsing the JSON data and loading it into

the components data object within a try and catch statement.

This ensures that we can gracefully handle parsing errors that might occur

This is not the error, but feel free to show the user a warning message if an

We will load the configuration object into the data object with the method load

into data, which we will define in the next step.

We add the load into data method to our methods object.

This method takes the saved configuration object as an argument.

We want to iterate through each key of this object and check if the key exists

If it does, we want to set the value of that data property equal to the value

of the respective configuration object's property.

With the method has on property, one can check if an object has a property.

We cannot use this dot has on property because our component instance is not

equal to a JavaScript object instance and does not have this method.