Welcome to

Interactive Vue.js Resume Builder

Enhance your Portfolio with a Kickass Vue 3 Resume Builder

Course Syllabus and Content

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”.

Module 1

Introduction

2 Lessons 3 Minutes

Learn why Vue.js is essential and a get a sneak-peak of the Resume Builder that you will untimatly create at the end of the this course.

Module 2

Project setup & rendering the resume

3 Lessons 31 Minutes

Set up the project and add basic markup and styling for your resume. You will also learn about the template, style, and script section in a Single-File component in Vue.

Module 3

Making the resume editable

4 Lessons1 Hours 4 Minutes

Make the resume content editable and learn about template directives, component methods, slots, props, conditional rendering, custom events for interacting between components, and class bindings.

  • 01Editing the resume content
    Sneak Peek00:16:31

    Make the resume content editable by learning the v-model and the v-on directive, methods, and how to handle events in Vue.js.

  • 02Improving the code structure
    Sneak Peek00:17:15

    Create Vue.js single file components and learn about slots, props, and custom events.

  • 03Adding and removing entries
    Sneak Peek00:17:43

    Add and remove resume entries dynamically by learning how to work with arrays in Vue.js. Learn about conditional rendering with the v-if directive.

  • 04Toggling edit mode
    Sneak Peek00:12:33

    Create a Vue.js toggle switch component and toggle the edit mode in the resume builder app.

Module 4

Configurable resume styling

2 Lessons 45 Minutes

Make the resume styling configurable and work on inline style binding and computed properties. Learn how to display, hide, and replace a picture by adding an upload functionality.

  • 01Make styling configurable
    Sneak Peek00:33:10

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

  • 02Configuring the photo
    Sneak Peek00:12:05

    Configure the photo of the resume builder. Learn how to upload an image as a data url and toggle visibility.

Module 5

Exporting the pdf, saving the configuration, further steps

3 Lessons 35 Minutes

Learn about lifecycle methods to save resume configutaion, and export the resume as a PDF. Learn how you can customize the resume builder further on your own.

  • 01Export resume as PDF
    Sneak Peek00:22:19

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

  • 02Save the resume configuration
    Sneak Peek00:10:50

    Save the resume configuration by learning about Vue.js lifecycle hooks, localStorage, and JavaScript Blob objects.

  • 03Where to take it from here
    Sneak Peek00:02:21

    Explore the documentation further and try it out in this app.