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

The browser does not understand Vue.js code. The browser only understands JavaScript.
Therefore, something needs to translate Vue.js code into JavaScript so our browser can understand it.
There are different ways of accomplishing this. A simple but also limited way is to load Vue via a CDN.
You just add a script tag to your html that will load the Vue.js library.

The advantage of this is that it is the fastest setup, which makes it great for prototyping.
The big disadvantage is that you cannot create Single-File components (SFC). With the Single-File component structure, each file contains one component.
Without this, the code can get messy once you create more than a few components. You are also dependent on the external server to serve the Vue.js library reliably.
So this makes it not the right choice for us.

We want to be able to use SFC so we will need a build tool. But we want a simple setup and configuration, too.
That is where 

 come in. These tools generate a preconfigured project for you.
In other words, we get a folder with the code and configuration files we need to start.
A Vite-based scaffolding tool called 

 is recommended to be used as of 2023.
It was created by Evan You, the same guy who created Vue (and so was Vite itself). Since this is the officially recommended setup, we will go with that.

 in the directory where you want your project to be. Make sure your node version is up to date before you run it. As of December 2023, 

 requires at least version 16.0 but you should check the 

 for the current minimum required. I am using node in version 18.17.1 and npm in version 9.6.7. You can check which versions of node and npm you are running with this command.

Now, we need to enter a project name. We type resume-builder and hit enter.
It asks us to install packages:

You can install these tools later on if you like, but for the beginning, let's keep things simple. Now that this is done, you can see that the scaffolding tool created a new folder in your current directory with the name of your app. It also gives you the commands to execute in order. First, we 

 (which stands for change directory) into the resume builder folder. You see all the files it created automatically for us. You will also notice that there has yet to be a node_modules folder. The scaffolding tool created the package.json, but we still need to install the dependencies listed there. We do this by running the 

 always needs to be run from the directory the package.json is in, so make sure you are in the resume-builder directory when you run it. Now we see a node_modules folder. If you look inside, you see that plenty of dependencies were installed.

The package.json shows us the dependencies. Our only dependency that we will need for production is Vue, the two Vite dependencies are only needed during development.
Depending on when you watch this tutorial the versions might differ.
What's important is that you use Vue 3.x. Which Vite version it installs should not make a noticeable difference.

resume-builder

To run the app locally for development, we need to start a local server. In the package.json you see the command that you need for that:

"scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
}

For development, we want to run the dev command. Type in 

 in the terminal of this directory. I like to use the terminal from Visual Studio Code for this.

You will see the address where you can open your local app. By default, Vite uses 

 for this. Let’s see what we find when we open this.

Here, we see a landing page created by Vite. Some useful links are listed on the right; feel free to check them out.

Let’s open the link to the official documentation in a new tab. We might need it later.

Also, the tooling part is interesting: “The recommended IDE setup is VSCode + Volar.” We are using Visual Studio Code. Let’s check if the Volar extension is installed and enabled. You can check this on the left extensions tab on the left side. It is installed and enabled since I have used this before. If you don’t have it installed and enabled yet, I recommend you do so.

Finally, let’s try to adjust this landing page. In the root directory, we see the index.html file. This is the page that gets rendered. You can see the div with the id app 

You can see that the main.js script lies in the src folder. It is the entry file to the JavaScript and Vue.js logic.

Navigate into the src folder and open the main.js file.

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

 component gets imported from App.vue. This component then gets mounted to the 

 with the id app.
So all that we see on the landing page must come from the 

 component and whichever components this component consists of.

 component shows that the template uses a component called 

. We comment this out and write “test” instead. So 

 component was the section on the right with all the resources. This was just an example to show how all the pieces work together. We will keep index.html and main.js as it is and only replace the content in App.vue. Of course, we will also add new components.

To clear out what we don't need, we can navigate into the components directory with the terminal and remove all content with:

This removes everything in the current directory (so always make sure you are in the correct one before running this command). If it prompts you to confirm this action, you just type y for yes and hit enter.

Now, we go into the App.vue file and clear out the content of the template section. I will write “resume builder to come soon” here instead. Next, we delete the script section and the style section.

If you open the app, you see that some styling is still applied. It comes from the 

 in the assets folder.
We empty this file but keep it because we will apply some styling in the next lesson.
We can delete the base.css file and the logo.svg file.

Now, the app does not have any styling applied. It is a clean canvas, ready for us to paint on.

In this lesson, we learned how to set up a Vue app with 

 and run it. We have learned the basic structure of folders and files that this scaffolding tool creates for us and how and where the 

 component gets rendered.
Finally, we have cleared out the code and the files that we don’t need so we can start fresh in the next lesson.

You can download the code for this lesson 

---
title: Project setup for building a Vue.js resume
isPublicLesson: true
privateVideoUrl: https://stream.mux.com/zjke02BKqco7rwsnXJraVyxJAQWpaH9ybGJzo02wSmW2E.m3u8
description: 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

The browser does not understand Vue.js code. The browser only understands JavaScript.
Therefore, something needs to translate Vue.js code into JavaScript so our browser can understand it.
There are different ways of accomplishing this. A simple but also limited way is to load Vue via a CDN.
You just add a script tag to your html that will load the Vue.js library.

```html
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
```

The advantage of this is that it is the fastest setup, which makes it great for prototyping.
The big disadvantage is that you cannot create Single-File components (SFC). With the Single-File component structure, each file contains one component.
Without this, the code can get messy once you create more than a few components. You are also dependent on the external server to serve the Vue.js library reliably.
So this makes it not the right choice for us.

We want to be able to use SFC so we will need a build tool. But we want a simple setup and configuration, too.
That is where [scaffolding tools](https://vuejs.org/guide/scaling-up/tooling.html#project-scaffolding) come in. These tools generate a preconfigured project for you.
In other words, we get a folder with the code and configuration files we need to start.
A Vite-based scaffolding tool called [create-vue](https://github.com/vuejs/create-vue) is recommended to be used as of 2023.
It was created by Evan You, the same guy who created Vue (and so was Vite itself). Since this is the officially recommended setup, we will go with that.

Run `npm create vue@latest` in the directory where you want your project to be. Make sure your node version is up to date before you run it. As of December 2023, `create-vue` requires at least version 16.0 but you should check the [vue quick start documentation](https://vuejs.org/guide/quick-start) for the current minimum required. I am using node in version 18.17.1 and npm in version 9.6.7. You can check which versions of node and npm you are running with this command.

```bash
node -v
```

and 

```bash
npm -v
```

```bash
npm create vue@latest
```

Now, we need to enter a project name. We type resume-builder and hit enter.
It asks us to install packages:

-   Add Typescript?: No
-   Add JSX Support? No
-   Vue Router? Vue Router is something you need when you have more than one page. We start with one page now, so we keep the default “No” by hitting enter.
-   Pinia: No
-   Vitest: No
-   End-to-End Testing: No
-   ESLint: No

You can install these tools later on if you like, but for the beginning, let's keep things simple. Now that this is done, you can see that the scaffolding tool created a new folder in your current directory with the name of your app. It also gives you the commands to execute in order. First, we `cd` (which stands for change directory) into the resume builder folder. You see all the files it created automatically for us. You will also notice that there has yet to be a node_modules folder. The scaffolding tool created the package.json, but we still need to install the dependencies listed there. We do this by running the `npm install`.
`npm install` always needs to be run from the directory the package.json is in, so make sure you are in the resume-builder directory when you run it. Now we see a node_modules folder. If you look inside, you see that plenty of dependencies were installed.

The package.json shows us the dependencies. Our only dependency that we will need for production is Vue, the two Vite dependencies are only needed during development.
Depending on when you watch this tutorial the versions might differ.
What's important is that you use Vue 3.x. Which Vite version it installs should not make a noticeable difference.

```json
{
  "name": "resume-builder",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.3.4"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.3.1",
    "vite": "^4.4.9"
  }
}
```

To run the app locally for development, we need to start a local server. In the package.json you see the command that you need for that:

```json
"scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
}
```

For development, we want to run the dev command. Type in `npm run dev` in the terminal of this directory. I like to use the terminal from Visual Studio Code for this.

```bash
npm run dev
```

You will see the address where you can open your local app. By default, Vite uses [http://localhost:5173/](http://127.0.0.1:5173/) for this. Let’s see what we find when we open this.

Here, we see a landing page created by Vite. Some useful links are listed on the right; feel free to check them out.

Let’s open the link to the official documentation in a new tab. We might need it later.

Also, the tooling part is interesting: “The recommended IDE setup is VSCode + Volar.” We are using Visual Studio Code. Let’s check if the Volar extension is installed and enabled. You can check this on the left extensions tab on the left side. It is installed and enabled since I have used this before. If you don’t have it installed and enabled yet, I recommend you do so.

Finally, let’s try to adjust this landing page. In the root directory, we see the index.html file. This is the page that gets rendered. You can see the div with the id app `<div id="app"></div>`. Underneath we have a script `<script type="module" src="/src/main.js"></script>.` 

You can see that the main.js script lies in the src folder. It is the entry file to the JavaScript and Vue.js logic.

Navigate into the src folder and open the main.js file.

```javascript
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')
```

We see that an `App` component gets imported from App.vue. This component then gets mounted to the `div` with the id app.
So all that we see on the landing page must come from the `App` component and whichever components this component consists of.

The `App` component shows that the template uses a component called `TheWelcome`. We comment this out and write “test” instead. So `TheWelcome` component was the section on the right with all the resources. This was just an example to show how all the pieces work together. We will keep index.html and main.js as it is and only replace the content in App.vue. Of course, we will also add new components.

To clear out what we don't need, we can navigate into the components directory with the terminal and remove all content with:

```bash
rm -rf *
```

This removes everything in the current directory (so always make sure you are in the correct one before running this command). If it prompts you to confirm this action, you just type y for yes and hit enter.

Now, we go into the App.vue file and clear out the content of the template section. I will write “resume builder to come soon” here instead. Next, we delete the script section and the style section.

If you open the app, you see that some styling is still applied. It comes from the `main.css` in the assets folder.
We empty this file but keep it because we will apply some styling in the next lesson.
We can delete the base.css file and the logo.svg file.

Now, the app does not have any styling applied. It is a clean canvas, ready for us to paint on.

In this lesson, we learned how to set up a Vue app with `create-vue` and run it. We have learned the basic structure of folders and files that this scaffolding tool creates for us and how and where the `App` component gets rendered.
Finally, we have cleared out the code and the files that we don’t need so we can start fresh in the next lesson.

:::note
You can download the code for this lesson [here](https://github.com/katharina-spiecker/vue-resume-app-course/releases/tag/lesson-1).
:::


How to setup a Vue.js project. Use create-vue to generate a new project. Learn about folder and file structure in Vue.js.

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

Project setup for building a Vue.js resume