Course introduction to "Build a Vue.js Resume"

Why you should learn Vue.js

Introduction

Project setup for building a Vue.js resume

Basic markup and styling

Component state and rendering data from it

Project setup & rendering the resume

Editing the resume content

Improving the code structure

Adding and removing entries

Toggling edit mode

Making the resume editable

Make styling configurable

Configuring the photo

Configurable resume styling

Export resume as PDF

Save the resume configuration

Where to take it from here

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

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!

If you want to use the built-in code editors please make sure to use the Chrome browser to avoid cross-browser differences.

---
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/)

:::important
If you want to use the built-in code editors please make sure to use the Chrome browser to avoid cross-browser differences.
:::


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

Learn

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

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Interactive Vue.js Resume Builder

Module 1: Introduction

Introduction:

Start Here

Lesson 1: (3:31)

Course introduction to "Build a Vue.js Resume"

Lesson 2:

Why you should learn Vue.js

Module 2: Project setup & rendering the resume

Lesson 1: (8:14)

Project setup for building a Vue.js resume

Lesson 2: (9:20)

Basic markup and styling

Lesson 3: (13:45)

Component state and rendering data from it

Module 3: Making the resume editable

Lesson 1: (16:31)

Editing the resume content

Lesson 2: (17:15)

Improving the code structure

Lesson 3: (17:43)

Adding and removing entries

Lesson 4: (12:33)

Toggling edit mode

Module 4: Configurable resume styling

Lesson 1: (33:10)

Make styling configurable

Lesson 2: (12:05)

Configuring the photo

Module 5: Exporting the pdf, saving the configuration, further steps

Lesson 1: (22:19)

Export resume as PDF

Lesson 2: (10:50)

Save the resume configuration

Lesson 3: (2:21)

Where to take it from here

Course introduction to "Build a Vue.js Resume"