Studies
Admissions
The Institute
Resources
Studies
Admissions
The Institute
Resources
Studies
Admissions
The Institute
Resources

FE405

The Vue Ecosystem

Barcelona Campus
Jan 09, 2023 - Jan 27, 2023
We will learn the basics of Nuxt3, explore different ways of building a website using its extensive ecosystem of plugins and modules, deploy and update our Nuxt3 project in the cloud.
Barcelona Campus
Jan 09, 2023 - Jan 27, 2023
Dani Nebot

Faculty

Dani Nebot

Full Stack Developer at Aetion

Course length

3 weeks

Duration

3 hours
per day

Total hours

45 hours

Credits

6 ECTS

Language

English

Course type

Offline

Fee for single course

€1500

Fee for degree students

€750

Skills you’ll learn

Frontend developmentState ManagementData FetchingFull-stack DevelopmentComponent-based DevelopmentVue 3 Composition APIAsynchronous ProgrammingVue FrameworkNuxt3Tailwind CSSSingle Page Apps (SPA)Server Side Rendering (SSR)Continuous Deployment (CD)Continuous Integration (CI)
OverviewCourse outlineCourse materialsPrerequisitesMethod & grading

Overview

This course will introduce the open source framework Nuxt3, built on top of Vue3 and Node.js. The goal of Nuxt is to make web development pleasant, simple and powerful, with almost zero configuration efforts. This enables powerful features such as Code Splitting, Server side, Client side or Hybrid rendering, SEO optimization, asynchronous data fetching and more, straight out of the box!

We will learn the basics of Nuxt3, then explore different ways of building a website using its extensive ecosystem of plugins and modules, and by the end of the course we will learn how to quickly deploy and update our Nuxt3 project in the cloud.

Learning highlights

  • The Nuxt framework and ecosystem.
  • Component-based development.
  • Authorization and state management.
  • Asynchronous programming and APIs.
  • Unit testing.
  • Continuous deployment and continuous integration.

Course outline

15 classes

Dive into the details of the course and get a sense of what each class will cover.
Monday
Tuesday
Wednesday
Thursday
Friday
Monday
1

Session 1

Vue refresher.

Typescript fundamentals.

Intro to Nuxt3.

SPA vs SSR vs SSG.

Tuesday
2

Session 2

Nuxt3 structure.

Views and assets.

Custom layouts.

Tailwind CSS.

Wednesday
3

Session 3

Nuxt routing.

Page navigation.

Dynamic routes.

Lazy components.

Thursday
4

Session 4

Nuxt middleware.

Authentication.

State management.

Dynamic components.

Friday
5

Session 5

Q&A + Practice session.

Monday
6

Session 6

Testing Nuxt with Vitest.

Tuesday
7

Session 7

Nuxt composables.

Consuming data from an external API: The useFetch hook.

Wednesday
8

Session 8

Having fun with Nuxt modules.

Thursday
9

Session 9

Introducing Nuxt content.

Why markdown?

Querying content and navigation.

Friday
10

Session 10

Q&A + Practice session.

Monday
11

Session 11

Fullstack Nuxt: Firebase

Tuesday
12

Session 12

Fullstack Nuxt: Socket.io.

Wednesday
13

Session 13

Vue composition utilities.

Thursday
14

Session 14

Continuous Deployment and Continuous.

Integration pipelines using.

Netlify, Vercel, GHA (and more?).

Friday
15

Session 15

Final project presentations.

Prerequisites

Good understanding of HTML and CSS.

Knowledge of JavaScript and programming.

Familiarity with the Vue framework.

Methodology

Lectures with demos and special emphasis on practice work.

Daily assignments which will build a weekly project.

Last day of each week we’ll have a Q&A session, a project presentation, and feedback.

Grading

The final grade will be composed of the following criteria:
10% - Assignments
10% - Class participation
40% - Weekly projects
40% - Final project
Dani Nebot

Faculty

Dani Nebot

Full Stack Developer at Aetion

Dani learned to code at 12 years old, and never looked back! He studied Computer Engineering in his hometown of Alicante, Spain, and in the US. He is passionate about the free web, open source and all things JavaScript. As an engineer with 15+ years of experience, he has seen many technologies, frameworks, libraries and tools come and go, which has cemented the importance of good, clean and maintainable code overall. He has experience with the 3 major frameworks of frontend web development: Angular, Vue and React, and loves how approachable and versatile Vue is.

Dani has co-founded two web based startups, worked as a freelancer while traveling the world, and was proud to collaborate as a coding teacher and mentor in the Code First Girls initiative in London. He is currently a Senior Fullstack Engineer at Aetion, where his main focus is the development of a platform for Real World Evidence to serve large quantities of data and the tools to analyze it effectively to teams of medical and pharmaceutical scientists.

See full profile

Apply for this course

Snap up your chance to enroll before all spaces fill up.

The Vue Ecosystem

by Dani Nebot

Total hours

45 Hours

Dates

Jan 09 - Jan 27, 2023

Fee for single course

€1500

Fee for degree students

€750

How to secure your spot

Complete the form below to kickstart your application

Schedule your Harbour.Space interview

If successful, get ready to join us on campus

FAQ

Will I receive a certificate after completion?

Yes. Upon completion of the course, you will receive a certificate signed by the director of the program your course belonged to.

Do I need a visa?

This depends on your case. Please check with the Spanish or Thai consulate in your country of residence about visa requirements. We will do our part to provide you with the necessary documents, such as the Certificate of Enrollment.

Can I get a discount?

Yes. The easiest way to enroll in a course at a discounted price is to register for multiple courses. Registering for multiple courses will reduce the cost per individual course. Please ask the Admissions Office for more information about the other kinds of discounts we offer and what you can do to receive one.