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

In the previous lesson, we have created the template structure for the resume. In Vue, you don't write data that might change hardcoded into the template. Instead, you capture the initial value in the component's reactive state and display this value to the template. Reactive because Vue reacts to any changes in this data by re-rendering the part of the component where this data is displayed. This way, you are dynamically displaying data. If the state changes, the template will automatically update.

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 this lesson, we will get to know the data method that holds the component state and how one renders data in Vue. We will use this knowledge to eliminate the template's placeholders and move all the data to the component's state.

 component only contains a template and some styling. As a first step, we need to add a script section containing the component state. Let's look up the structure in the 

The script section defines a Vue component using the default export syntax from ES6. You can include an object with various component options in this script section. Among these options, one crucial method is called 

. The data method should be defined within this object, and it returns an object itself. This inner object is where you capture and store the reactive data for your component. In other words, the data method returns an object containing the initial state of the component, and Vue will automatically track any changes to this data for dynamic updates. Therefore, I will be referring to the reactive state of a component as the data object. Remember that it gets declared as a method with the name 

Let's start by moving the name, title, and intro text away from the template here. I will be using dummy data for this resume. You can use the same, make up different data, or use your own data.

Since the data object is just a JavaScript object, it can contain any data type that JavaScript objects can contain. I point this out because you can add attributes containing any 

 as well as attributes containing objects and arrays.

In order to render data in the template, we use the mustache syntax in Vue. The mustache syntax describes these two curly braces that would look like a mustache if turned 90 degrees.
They are responsible for printing out the reactive data. You reference this data in the template simply by using the property names.
Vue refers to the printing of dynamic data as 

<div class="personal-name">
  {{ name }}
</div>
<div class="personal-title">
  {{ title }}
</div>

<div class="resume-section">
  <h4 class="section-headline">
    About me
  </h4>
  <div>
    {{ introText }}
  </div>
</div>

Vue's reactivity system watches the values stored in the data object, and if anything changes, the associated template automatically updates. This reactivity of the DOM in regard to the data it contains is called 

. It eliminates the need for manual DOM manipulation, ensuring that your user interface remains synchronized with the underlying data.

. A JavaScript expression can be anything that resolves to a value. As you can see, if I type a simple arithmetic expression here, it gets printed out.

"Vue actually supports the full power of JavaScript expressions inside all data bindings."

In addition to text interpolation, Vue provides other forms of data binding. When you need to bind dynamic data to HTML attributes, you cannot use the mustache syntax. Instead, Vue offers the 

, you can dynamically set HTML attributes based on the component's data. For example, you can use 

 attribute of an image element or the href attribute of a link.

To demonstrate this, we are going to add a picture to our resume.

 which does not exist yet. First, you must add a picture to the public folder of the project's directory.
Next, you can reference the name of the image in the data object.

data() {
    return {
      ...
      imageUrl: "/profile_pic.jpg"
    }
}

You can see the image being displayed, but it needs some styling.

.profile-pic {
  display: block;
  width: 160px;
  height: 160px;
  border: 5px solid var(--highlight-color-left);
  margin-bottom: 20px;
  object-fit: cover;
  margin-left: auto;
  margin-right: auto;
  border-radius: 50%;
}

 infront of it. Vue provides a shortcut for the 

---
title: Component state and rendering data from it
isPublicLesson: true
privateVideoUrl: https://stream.mux.com/b9sEaugKQ4qL02D01NMOOYKviA008fNS02FE02U6Kx00B1i02U.m3u8
description: How to render data from component state. Learn about Vue.js directives, and reactive rendering.
code: https://gitlab.com/fullstackio/books/newline-course-apps/katharina-spiecker-build-a-vuejs-resume-app/-/tree/main/lesson-3-starting-code?ref_type=heads
useMdx: true
---

## Component state and rendering data from it

In the previous lesson, we have created the template structure for the resume. In Vue, you don't write data that might change hardcoded into the template. Instead, you capture the initial value in the component's reactive state and display this value to the template. Reactive because Vue reacts to any changes in this data by re-rendering the part of the component where this data is displayed. This way, you are dynamically displaying data. If the state changes, the template will automatically update.

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

In this lesson, we will get to know the data method that holds the component state and how one renders data in Vue. We will use this knowledge to eliminate the template's placeholders and move all the data to the component's state.

So far, our `App` component only contains a template and some styling. As a first step, we need to add a script section containing the component state. Let's look up the structure in the [documentation](https://vuejs.org/guide/essentials/component-basics.html#defining-a-component).

```javascript
<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>
```

The script section defines a Vue component using the default export syntax from ES6. You can include an object with various component options in this script section. Among these options, one crucial method is called `data`. The data method should be defined within this object, and it returns an object itself. This inner object is where you capture and store the reactive data for your component. In other words, the data method returns an object containing the initial state of the component, and Vue will automatically track any changes to this data for dynamic updates. Therefore, I will be referring to the reactive state of a component as the data object. Remember that it gets declared as a method with the name `data` that returns an object.

### Adding name, title, and intro text

Let's start by moving the name, title, and intro text away from the template here. I will be using dummy data for this resume. You can use the same, make up different data, or use your own data.

```javascript
<script>
export default {
  data() {
    return {
      name: "Michaela Scarn",
      title: "Senior Data Scientist",
      introText: "From data cleaning to data analysis to machine learning, I am passionate about everything data."
    }
  }
}
</script>
```

Since the data object is just a JavaScript object, it can contain any data type that JavaScript objects can contain. I point this out because you can add attributes containing any [primitive data type](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures?retiredLocale=de#primitive_values) as well as attributes containing objects and arrays.

In order to render data in the template, we use the mustache syntax in Vue. The mustache syntax describes these two curly braces that would look like a mustache if turned 90 degrees.
They are responsible for printing out the reactive data. You reference this data in the template simply by using the property names.
Vue refers to the printing of dynamic data as [text interpolation](https://vuejs.org/guide/essentials/template-syntax.html#text-interpolation).
We add the name and title.

```html
<div class="personal-name">
  {{ name }}
</div>
<div class="personal-title">
  {{ title }}
</div>
```

In the 'About me' section, we add the `introText`.

```html
<div class="resume-section">
  <h4 class="section-headline">
    About me
  </h4>
  <div>
    {{ introText }}
  </div>
</div>
```

Vue's reactivity system watches the values stored in the data object, and if anything changes, the associated template automatically updates. This reactivity of the DOM in regard to the data it contains is called `data binding`. It eliminates the need for manual DOM manipulation, ensuring that your user interface remains synchronized with the underlying data.

The mustache syntax can also contain a [JavaScript expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators?retiredLocale=de#). A JavaScript expression can be anything that resolves to a value. As you can see, if I type a simple arithmetic expression here, it gets printed out.

```html
<div>{{ 1 + 1 }}</div>
```

As the [Vue documentation](https://vuejs.org/guide/essentials/template-syntax.html#using-javascript-expressions) states:

> "Vue actually supports the full power of JavaScript expressions inside all data bindings."

### Adding the image

In addition to text interpolation, Vue provides other forms of data binding. When you need to bind dynamic data to HTML attributes, you cannot use the mustache syntax. Instead, Vue offers the [v-bind directive](https://vuejs.org/guide/essentials/template-syntax.html#attribute-bindings) for this purpose. With `v-bind`, you can dynamically set HTML attributes based on the component's data. For example, you can use `v-bind` to set the `src` attribute of an image element or the href attribute of a link.

To demonstrate this, we are going to add a picture to our resume.

```html
<img v-bind:src="imageUrl" class="profile-pic" alt="profile picture">
```

The dynamic `src` attribute now references `imageUrl` which does not exist yet. First, you must add a picture to the public folder of the project's directory.
Next, you can reference the name of the image in the data object.

```javascript
data() {
    return {
      ...
      imageUrl: "/profile_pic.jpg"
    }
}
```

You can see the image being displayed, but it needs some styling.

```css
.profile-pic {
  display: block;
  width: 160px;
  height: 160px;
  border: 5px solid var(--highlight-color-left);
  margin-bottom: 20px;
  object-fit: cover;
  margin-left: auto;
  margin-right: auto;
  border-radius: 50%;
}
```

We made the `src` attribute dynamic by adding `v-bind:` infront of it. Vue provides a shortcut for the `v-bind directive`. Instead of `v-bind:` you can just write a colon.

```html
<img :src="imageUrl" class="profile-pic" alt="profile picture">
```

In many countries, adding a picture to the resume is common. We want to give users the option at least. Therefore, we added a placeholder image now and let the user replace or remove the image later on.

So far, we have moved two strings and the image path in the data object. Next, I will move all headlines into an array.