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

In the previous lessons, we have made the resume editable. The user can change the text and add or remove sections. In this lesson, we will also make the styling configurable. This way, every user can create their own unique resume look!

We will give the user the following options:

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.

First, we want to add a sidebar where the user can find all the editing options. We want this sidebar to appear on the left side of the screen.

For this, we need to create a new component called 

<template>
    <div class="sidebar">
     placeholder
    </div>
</template>


<style scoped>
.sidebar {
  width: 300px;
  padding: 20px 20px 20px 30px;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  background-color: rgb(230, 230, 230);
}
</style>

In order to prevent overlap with the resume, we will move the resume 

 to the very right of the container, with 

Starting from a bigger screen size, however, this will create too much distance between the sidebar and the resume. Therefore, we center the resume in the container starting from a screen width size of 1600px.

#resume {
  ...
  margin-left: auto;
}

@media (min-width: 1350px) {
  #resume {
    margin-left: 300px;
  }
}

@media (min-width: 1600px) {
  #resume {
    margin-left: auto;
    margin-right: auto;
  }
}

We created the sidebar, but now it is time to add the content.
The first component we want to display in the sidebar is the edit toggle. To display other elements in the sidebar, we add slot tags.

And there we have it! One more thing I noticed here: The resume content is overflowing the resume in edit mode, because of the edit buttons.
Let's tie the height CSS rule for the resume to the edit mode. We only need a fixed height when edit mode is off.

To make the colors adjustable, we start by moving the hex codes of the colors used in the resume in the 

 component's state.
The left and the right column can be styled differently, so we create a nested object 

data() {
    return {
      colors: {
        left: {
          highlight: "#82C0CC",
          text: "#ffffff",
          background: "#3943B7"
        },
        right: {
          highlight: "#3943B7",
          text: "#000505",
          background: "#ffffff"
        }
      }
      ...
    }
}

We must find a way to have our stylesheet use these values. In a previous lesson, we set CSS variables for these colors in main.css on the root element.

:root {
  --highlight-color-left: #82c0cc;
  --background-color-left: #3943b7;
  --text-color-left: #ffffff;
  --highlight-color-right: #3943b7;
  --background-color-right: #ffffff;
  --text-color-right: #000505;
}

We were able to reference these in our CSS rules anywhere, such as in our 

.right-col .section-headline {
    color: var(--highlight-color-right);
}

While it is a common practice to declare the 

 pseudo-class, we could also define the variables on any element.

All the children of the element will have access to those variables.

Since we need the children of the resume element to have access, we can define the variables on the 

 element. This is the outer wrapper for all resume content.

We want to set the CSS variables with an inline style. Let’s use a static value to test it out first. Now we can delete the variable from main.css, and you see that the primary color is now read from the 

In order to tie values from the data object to inline style, we can use the 

.
The value needs to be a JavaScript object.

Now, the color is displayed dynamically, but we need a color input so that the user can adjust the color.
To isolate the markup and styling of this color input, we create a new component, 

. Even though it is not often used, HTML actually has an input element of type color that we can use in our component.

In the new component, we add a template section with an input element of type color and a label. By wrapping the input in the label, we don't need to add the for attribute to the label element.

<template>
    <label>
        <input type="color">
        Choose a color
    </label>
</template>

 component and display it within the sidebar. Since our sidebar component contains a slot, we can add it in between the component tags.

The default styling does not look great, so let's add a scoped style section and give the input element the class 

.
By inspecting the default styling in the browser, we can figure out which styling we need to overwrite. 

.color-picker {
    margin-right: 10px;
    width: 26px; /* offset strange height, width difference */
    height: 30px;
    padding: 0;
    border: none;
    background: transparent;
}

Since we will reuse this component for configuring the other colors as well, we will have to make the text adjustable.
We can use a prop for this.

We create a script section and add a prop with the name “label” to it. Let's give the prop a type of 

 and a default value of "Choose a color".

---
title: Make styling configurable
isPublicLesson: true
privateVideoUrl: https://stream.mux.com/3WPW20254FsnOwMEx1sg2iPAIfgoLj02v02M002dHBpzy2c.m3u8
description: Make styling configurable with Vue.js class and style binding. Create a color input component, a select component, and more.
code: https://gitlab.com/fullstackio/books/newline-course-apps/katharina-spiecker-build-a-vuejs-resume-app/-/tree/main/lesson-8-starting-code?ref_type=heads
useMdx: true
---

## Make styling configurable

In the previous lessons, we have made the resume editable. The user can change the text and add or remove sections. In this lesson, we will also make the styling configurable. This way, every user can create their own unique resume look!

We will give the user the following options:

-   Changing colors
-   Width of the left column
-   Headline thickness
-   Photo shape round or square

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

First, we want to add a sidebar where the user can find all the editing options. We want this sidebar to appear on the left side of the screen.

For this, we need to create a new component called `Sidebar`.

```html
<template>
    <div class="sidebar">
     placeholder
    </div>
</template>


<style scoped>
.sidebar {
  width: 300px;
  padding: 20px 20px 20px 30px;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  background-color: rgb(230, 230, 230);
}
</style>
```

We must import and register it in the `App` component.

I will add it to the top of the `main` element.

```html
<main class="container">
    <Sidebar />
...
</main>
```

In order to prevent overlap with the resume, we will move the resume `div` to the very right of the container, with `margin-left: auto;`.

Starting from a bigger screen size, however, this will create too much distance between the sidebar and the resume. Therefore, we center the resume in the container starting from a screen width size of 1600px.

```css
#resume {
  ...
  margin-left: auto;
}

@media (min-width: 1350px) {
  #resume {
    margin-left: 300px;
  }
}

@media (min-width: 1600px) {
  #resume {
    margin-left: auto;
    margin-right: auto;
  }
}
```

We created the sidebar, but now it is time to add the content.
The first component we want to display in the sidebar is the edit toggle. To display other elements in the sidebar, we add slot tags.

```html
<template>
    <div class="sidebar">
        <slot></slot>
    </div>
</template>
```

In the `App` component, we can now move the `EditToggle` in between the `Sidebar` tags.

```html
<Sidebar>
    <EditToggle @edit-mode-toggled="toggleEditMode" />
</Sidebar>
```

And there we have it! One more thing I noticed here: The resume content is overflowing the resume in edit mode, because of the edit buttons.
Let's tie the height CSS rule for the resume to the edit mode. We only need a fixed height when edit mode is off.

### Changing colors

To make the colors adjustable, we start by moving the hex codes of the colors used in the resume in the `App` component's state.
The left and the right column can be styled differently, so we create a nested object `colors` with a `left` and a `right` property that each
hold values for `highlight`, `text`, and `background`.

```javascript
data() {
    return {
      colors: {
        left: {
          highlight: "#82C0CC",
          text: "#ffffff",
          background: "#3943B7"
        },
        right: {
          highlight: "#3943B7",
          text: "#000505",
          background: "#ffffff"
        }
      }
      ...
    }
}
```

We must find a way to have our stylesheet use these values. In a previous lesson, we set CSS variables for these colors in main.css on the root element.

```css
:root {
  --highlight-color-left: #82c0cc;
  --background-color-left: #3943b7;
  --text-color-left: #ffffff;
  --highlight-color-right: #3943b7;
  --background-color-right: #ffffff;
  --text-color-right: #000505;
}
```

We were able to reference these in our CSS rules anywhere, such as in our `SectionHeadline` component.

```css
.right-col .section-headline {
    color: var(--highlight-color-right);
}
```

While it is a common practice to declare the [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) on the `:root` pseudo-class, we could also define the variables on any element.

All the children of the element will have access to those variables.

Since we need the children of the resume element to have access, we can define the variables on the `div#resume` element. This is the outer wrapper for all resume content.

We want to set the CSS variables with an inline style. Let’s use a static value to test it out first. Now we can delete the variable from main.css, and you see that the primary color is now read from the `div#resume`.

```html
<div
	class="resume d-flex"
	style="--highlight-color-right: #3943b7">
    ...
</div>
```

In order to tie values from the data object to inline style, we can use the `v-bind:style` or just `:style`.
The value needs to be a JavaScript object.

```html
<div
	class="resume d-flex"
	:style="{'--highlight-color-right': colors.right.highlight}">
    ...
</div>
```

Now, the color is displayed dynamically, but we need a color input so that the user can adjust the color.
To isolate the markup and styling of this color input, we create a new component, `ColorInput.vue`. Even though it is not often used, HTML actually has an input element of type color that we can use in our component.

In the new component, we add a template section with an input element of type color and a label. By wrapping the input in the label, we don't need to add the for attribute to the label element.

```html
<template>
    <label>
        <input type="color">
        Choose a color
    </label>
</template>
```

Let's import this component into the `App` component and display it within the sidebar. Since our sidebar component contains a slot, we can add it in between the component tags.

```html
<Sidebar>
  <EditToggle @edit-mode-toggled="toggleEditMode" />
  <ColorInput />
</Sidebar>
```

The default styling does not look great, so let's add a scoped style section and give the input element the class `color-picker`.
By inspecting the default styling in the browser, we can figure out which styling we need to overwrite. 

```css
.color-picker {
    margin-right: 10px;
    width: 26px; /* offset strange height, width difference */
    height: 30px;
    padding: 0;
    border: none;
    background: transparent;
}
```

Since we will reuse this component for configuring the other colors as well, we will have to make the text adjustable.
We can use a prop for this.

We create a script section and add a prop with the name “label” to it. Let's give the prop a type of `String` and a default value of "Choose a color".

We print out the label prop after the color input. To overwrite the default value, we pass the label prop with the value "Highlight color" to the ColorInput component.
Make sure to never use `v-bind`, when you are passing a static string value.
Otherwise, Vue will try to interpret the value as JavaScript and throw an error.

Once the color changes, our ColorInput component should inform the parent component. Let’s first check how we can access the color. 

```html
<input
	type="color"
	class="color-picker"
	@change="console.log($event.target.value)">
```

With `$event.target.value`, we can access the hex code of the newly picked color. 

Make styling configurable with Vue.js class and style binding. Create a color input component, a select component, and more.

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

Make styling configurable