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

One of the most important parts of our application is to be able to save the resume as a PDF. After all, we want users to be able to apply with this resume. The user can send this resume digitally, via email, LinkedIn, etc, or even print it out.

One option would be to let the user print the resume directly from the app with the browser’s window.print() API. The problem is that this will often distort the look of the resume, for example, by adding a default header and footer, decreasing the quality, etc. Every browser has a different default setting, so it is hard to provide this functionality in a good way for all users.

The better option is to export the resume pdf with a library.

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.

We want to add an "Export as pdf" button. Since we will use more buttons in further lessons, we will create a 

 component first. This way, we can add a scoped button style to this component, and all the CustomButtons will look similar. We create a 

 file in the components directory. In the template section, we add button tags. Inside this button, we add a slot. This way, the content of the button can be passed in from the parent component.

 and another dynamic class for the button type.
We can add a dynamic class attribute in addition to the static one, with 

. As a value, we pass in the name of the computed property.

In order to generate the custom class, we will receive the prop 

. We set an empty string as a default value to make this prop optional.

The prop value will be "primary" or "secondary", for example, and we want to generate classes such as 

. For that, we add a computed property where we concatenate the string 

computed: {
    customClass() {
        if(this.btnType) {
            return 'btn-' + this.btnType
        }
    }
}

For those classes, we add some styling as well in the scoped styling section.
All buttons will get default styling with the 

 class, but the buttons that also get a custom class, such as 

Now that we have a standardized button component, we will create an 

 component.
As we did before many times in the 

 component, we first import the component, register it in the components object,
and then we can use it in our template.
We add the text "Export as pdf" to be rendered inside the slot and add the prop 

.
The button gets an event listener that listens to the 

 event and calls an event handler that we will call 

<template>
    <CustomButton @click="exportPdf" btn-type="primary">
        Export resume pdf
    </CustomButton>
</template>

<script>
import CustomButton from './CustomButton.vue';

export default {
    components: {
        CustomButton
    }
}
</script>

 method that fires when the button is clicked, one thing I want to do is see this component displayed. For that, we need to import the 

 component and register it. For now, we will just add it somewhere in the sidebar.

Before triggering the export, we need to make sure that the editing mode is off. Otherwise, the resume would be exported with all those buttons and editing visualization. One way to achieve this is by adding a 

 directive to the components tag. Now, the user can only use the export pdf button when editing mode is toggled off.

---
title: Export resume as PDF
isPublicLesson: true
privateVideoUrl: https://stream.mux.com/qYwDIb12lHJ7ZkV5NbCQKa00FsMA6aGWUEvb01WHuI8Qk.m3u8
description: Add an export as PDF functionality to the resume builder. Integrate the jsPdf library into your app.
code: https://gitlab.com/fullstackio/books/newline-course-apps/katharina-spiecker-build-a-vuejs-resume-app/-/tree/main/lesson-10-starting-code?ref_type=heads
useMdx: true
---

## Export resume as PDF

One of the most important parts of our application is to be able to save the resume as a PDF. After all, we want users to be able to apply with this resume. The user can send this resume digitally, via email, LinkedIn, etc, or even print it out.

One option would be to let the user print the resume directly from the app with the browser’s window.print() API. The problem is that this will often distort the look of the resume, for example, by adding a default header and footer, decreasing the quality, etc. Every browser has a different default setting, so it is hard to provide this functionality in a good way for all users.

The better option is to export the resume pdf with a library.

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-1" />

We want to add an "Export as pdf" button. Since we will use more buttons in further lessons, we will create a `CustomButton` component first. This way, we can add a scoped button style to this component, and all the CustomButtons will look similar. We create a `CustomButton.vue` file in the components directory. In the template section, we add button tags. Inside this button, we add a slot. This way, the content of the button can be passed in from the parent component.

```html
<template>
    <button>
        <slot></slot>
    </button>
</template>
```

All the buttons will get the class `btn` and another dynamic class for the button type.
We can add a dynamic class attribute in addition to the static one, with `v-bind:class` or `:class`. As a value, we pass in the name of the computed property.

```html
<template>
    <button
        class="btn"
        :class="customClass"
    >
        <slot></slot>
    </button>
</template>
```

In order to generate the custom class, we will receive the prop `btnType`. We set an empty string as a default value to make this prop optional.

```javascript
<script>
    export default {
        props: {
            btnType: {
                type: String,
                default: ""
            }
        }
    }
</script>
```

The prop value will be "primary" or "secondary", for example, and we want to generate classes such as `btn-primary` and `btn-secondary`. For that, we add a computed property where we concatenate the string `btn-` with the prop value.

```javascript
computed: {
    customClass() {
        if(this.btnType) {
            return 'btn-' + this.btnType
        }
    }
}
```

For those classes, we add some styling as well in the scoped styling section.
All buttons will get default styling with the `.btn` class, but the buttons that also get a custom class, such as `btn-primary`, will overwrite the default styling.

Now that we have a standardized button component, we will create an `ExportPdf` component.
In the `ExportPdf` component, we will use the `CustomButton` component.
As we did before many times in the `App` component, we first import the component, register it in the components object,
and then we can use it in our template.
We add the text "Export as pdf" to be rendered inside the slot and add the prop `btn-type="primary"`.
The button gets an event listener that listens to the `click` event and calls an event handler that we will call `exportPdf`.

```html
<template>
    <CustomButton @click="exportPdf" btn-type="primary">
        Export resume pdf
    </CustomButton>
</template>

<script>
import CustomButton from './CustomButton.vue';

export default {
    components: {
        CustomButton
    }
}
</script>
```

Before we add the `exportPdf` method that fires when the button is clicked, one thing I want to do is see this component displayed. For that, we need to import the `ExportPdf` in the `App` component and register it. For now, we will just add it somewhere in the sidebar.

Before triggering the export, we need to make sure that the editing mode is off. Otherwise, the resume would be exported with all those buttons and editing visualization. One way to achieve this is by adding a `v-if="!editing"` directive to the components tag. Now, the user can only use the export pdf button when editing mode is toggled off.

```html
<Sidebar>
	...
	<ExportPdf v-if="!editing"/>
</Sidebar>
```

While we are at it, we will add `v-if="editing"` to the elements in the sidebar that should only be visible when editing is on. This way, all those configuration options will be removed when edit mode is off, and the user can focus on the export options.

Add an export as PDF functionality to the resume builder. Integrate the jsPdf library into your app.

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

Export resume as PDF