Course Introduction to "Build a Vue.js Resume"

Welcome! In this course, we will create a resume builder with Vue.js. With this resume builder, you can easily create your resume, customize the styling to your preference, and avoid the headache of a standard Word pre-made resume. On top of that, you will learn all the essential concepts of Vue.js by applying them directly in this project. You will have a stylish resume to show your potential employers and a project that demonstrates your Vue knowledge.

My name is Kathi and I am a web developer who has been working with Vue.js for several years. Vue.js is my preferred JavaScript framework. I currently work as a freelance developer, a technical writer, and in a start-up.

This course only requires prior knowledge in HTML, JavaScript, and CSS. The course is for developers who are at a beginner or intermediate level in their Vue.js journey. I will explain the important concepts in a way that somebody with no prior Vue experience should be able to follow. I will always link to the relevant Vue documentation so that you can read up on more details if you are interested. If you have any questions you can comment inline or ask in our Discord. You can find the link in the notes below.

To create the resume builder, we will be using Vue 3 with the Options API.

The course is structured in four modules with twelve lessons in total.

First, we will set up the project and add basic markup and styling for our resume. In this module, you will learn about the template, style, and script section in a Single-File component in Vue. We will introduce reactive state with the data function and render content using this reactive state. In this context, you will learn about text interpolation and template directives.

In the second module, we will make the resume content editable. Here, you will learn about further important template directives such as 

, as well as about component methods. We will learn about Vue components and break our app apart into several components to improve its structure. Besides components, you will learn about slots, props, and custom events essential for interacting between components. As a second step to making the resume content editable, we will add functionality for adding and removing entries. Here, you will learn about conditional rendering. In this module's last lesson, we will enable the user to toggle edit mode on or off. In this lesson, you will learn about class bindings.

In module three, we will make the resume styling configurable. In the first lesson of the module, we will make the styling, such as the colors, configurable. Afterward, we will enable the user to choose between displaying a picture or hiding it and make the photo replaceable by adding an upload functionality. In this module you will learn about inline style binding and computed properties.

In the fourth and last module, we will enable the user to export the resume as a PDF as well as save the resume. You will learn about working with lifecycle methods here.

We will wrap up by looking at some ideas of how you can customize the resume maker further on your own.

I'm so excited to have you here and create a resume builder with Vue.js with me. Let's get started!

---
title: Course introduction to "Build a Vue.js Resume"
isPublicLesson: true
privateVideoUrl: https://stream.mux.com/9J1lRXiRtmYzH91xGvlTf501Omls01FOHJi5ZtH9FIhxU.m3u8
description: 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"

### What is this course about?

Welcome! In this course, we will create a resume builder with Vue.js. With this resume builder, you can easily create your resume, customize the styling to your preference, and avoid the headache of a standard Word pre-made resume. On top of that, you will learn all the essential concepts of Vue.js by applying them directly in this project. You will have a stylish resume to show your potential employers and a project that demonstrates your Vue knowledge.

### About myself

My name is Kathi and I am a web developer who has been working with Vue.js for several years. Vue.js is my preferred JavaScript framework. I currently work as a freelance developer, a technical writer, and in a start-up.

### Who is this course for?

This course only requires prior knowledge in HTML, JavaScript, and CSS. The course is for developers who are at a beginner or intermediate level in their Vue.js journey. I will explain the important concepts in a way that somebody with no prior Vue experience should be able to follow. I will always link to the relevant Vue documentation so that you can read up on more details if you are interested. If you have any questions you can comment inline or ask in our Discord. You can find the link in the notes below.

To create the resume builder, we will be using Vue 3 with the Options API.

### Course outline

The course is structured in four modules with twelve lessons in total.

First, we will set up the project and add basic markup and styling for our resume. In this module, you will learn about the template, style, and script section in a Single-File component in Vue. We will introduce reactive state with the data function and render content using this reactive state. In this context, you will learn about text interpolation and template directives.

In the second module, we will make the resume content editable. Here, you will learn about further important template directives such as `v-model`, `v-on`, as well as about component methods. We will learn about Vue components and break our app apart into several components to improve its structure. Besides components, you will learn about slots, props, and custom events essential for interacting between components. As a second step to making the resume content editable, we will add functionality for adding and removing entries. Here, you will learn about conditional rendering. In this module's last lesson, we will enable the user to toggle edit mode on or off. In this lesson, you will learn about class bindings.

In module three, we will make the resume styling configurable. In the first lesson of the module, we will make the styling, such as the colors, configurable. Afterward, we will enable the user to choose between displaying a picture or hiding it and make the photo replaceable by adding an upload functionality. In this module you will learn about inline style binding and computed properties.

In the fourth and last module, we will enable the user to export the resume as a PDF as well as save the resume. You will learn about working with lifecycle methods here.

We will wrap up by looking at some ideas of how you can customize the resume maker further on your own.

I'm so excited to have you here and create a resume builder with Vue.js with me. Let's get started!

-   Module 1: Intro & Getting Started

    -   [Project setup](/courses/build-a-vuejs-resume-app/project-setup-for-building-a-vue-js-resume/)
    -   [Basic markup and styling](/courses/build-a-vuejs-resume-app/basic-markup-and-styling/)

        -   new Vue concepts: template and style section
    -   [Component state and rendering data from it](/courses/build-a-vuejs-resume-app/component-state-and-rendering-data-from-it/)

        -   new Vue concepts: reactive state, text interpolation, directives
-   Module 2: Making the resume editable

    -   [Editing the resume content](/courses/build-a-vuejs-resume-app/editing-the-resume-content/)

        -   new Vue concepts: v-model, v-on, component methods
    -   [Improving the code structure](/courses/build-a-vuejs-resume-app/improving-the-code-structure/)

        -   new Vue concepts: components, slots, props, custom events
    -   [Adding and removing entries](/courses/build-a-vuejs-resume-app/adding-and-removing-entries/)

        -   new Vue concepts: conditional rendering
    -   [Toggling edit mode](/courses/build-a-vuejs-resume-app/toggling-edit-mode/)

        -   new Vue concepts: class bindings 
-   Module 3: Configurable resume styling

    -   [Make styling configurable](/courses/build-a-vuejs-resume-app/make-styling-configurable/)

        -   new Vue concepts: inline style binding, computed properties
    -   [Configuring the photo](/courses/build-a-vuejs-resume-app/configuring-the-photo/)
-   Module 4: Exporting the pdf, saving the configuration, further steps

    -   [Export resume as PDF](/courses/build-a-vuejs-resume-app/export-resume-as-pdf/)
    -   [Save the resume configuration](/courses/build-a-vuejs-resume-app/save-the-resume-configuration/)

        -   new Vue concepts: lifecycle methods
    -   [Where to take it from here](/courses/build-a-vuejs-resume-app/where-to-take-it-from-here/)


Katharina

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"

Welcome! In this course, you will create a resume builder with UJS.

With this resume builder, you can easily create your resume, customize the

and avoid the headache of a standard word-free-made resume.

On top of that, you will learn all the essential concepts of UJS

by applying them directly in this project.

You will have a stylish resume to show your potential employers

and project that demonstrates your view knowledge.

My name is Katty, and I am a web developer who has been working with UJS for

UJS is my preferred JavaScript framework.

I currently work as a freelance developer, a technical writer, and an installer

This course only requires prior knowledge and HTML, JavaScript, and CSS.

The course is for developers who are at a beginner or intermediate level in

I will explain the important concepts in a way that somebody with no prior view

I will always link to the relevant view documentation so that you can read up

If you have any questions, you can comment, inline, or ask in Discord.

You can find the link in the notes below.

To create the resume builder, we will be using view3 with the options API.

The course is structured into four modules with 12 lessons in total.

First, we will set up the project and add basic markup and styling for our

In this module, you will learn about the template style and script section and

We will introduce Reactive State with the data function and render content

In this context, you will learn about text interpolation and template

In the second module, we will make the resume content editable.

Here you will learn about further important template directives, such as Emodel

, Vian, as well as about component methods.

We will learn about view components and break our app apart into several

Besides components, you will learn about slots, props, and custom events,

essential for interacting between components.

As a second step to making the resume content editable, we will add

functionality for adding and removing entries.

Here, you will learn about conditional rendering.

In this module's last lesson, we will enable the user to target edit mode on or

In this lesson, you will learn about class bindings.

In module 3, we will make the resume styling configurable.

In the first lesson of the module, we will make the styling such as the colors

Afterward, we will enable the user to choose between displaying a picture or

and make the photo replaceable by adding an upload functionality.

In this module, you will learn about inline style binding and computed

In the fourth and last module, we will enable the user to export the resume as

You will learn about working with life cycle methods here.

We will wrap up by looking at some ideas of how you can customize the resume

I am so excited to have you here and create a resume builder with Vue.js with

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Masterclasses

Tutorials

Fullstack React with TypeScript