FE403
Introduction to Vue.js
Faculty
Dani Nebot
Full Stack Developer at Aetion
Course length
Duration
Total hours
Credits
Language
Course type
Fee for single course
Fee for degree students
Skills you’ll learn
Overview
This course will be an introduction to the Vue framework and ecosystem, with a special emphasis on practicing how to build a real world web application. We’ll learn how to create a Vue project, its template syntax, as well as the new Vue 3 composition API. We’ll learn how all of these can be used together to create a modern SPA (Single Page Application) using a component-based development approach. We’ll cover the fundamentals of the Vue Router, so we can navigate between the different views of our app, and we’ll even fetch real external data using API calls. We’ll also have an intro to basic Unit Testing and why it’s important, and we’ll end by learning about the building process and how to deploy our app into production.
Learning highlights
- Introduction to the Vue framework and ecosystem
- Component-based development
- Vue 3 composition API
- State management
- Asynchronous Programming and APIs
Course outline
15 classes
Session 1
Intro to the Vue framework
Vite & VS code setup
The template syntax
Attribute, class & style binding
Session 2
Vue fundamentals:
Conditional rendering
List rendering
Forms binding
Simple event handling
Session 3
What is functional programming?
Computed properties
Reactivity
Watchers
Refs
Session 4
Vue components 101
Single file components (SFCs)
The setup function
Props
Session 5
Q&A + Practice Session
Session 6
Advanced Vue components:
Custom events
Slots
Provide/Inject
Session 7
Asynchronous JavaScript:
Callbacks, promises & async/await
The fetch API
Async components
Session 8
Unit testing with Jest
Unit testing a Vue application
Mocks & Stubs
Session 9
Vue Router
URL Parameters
Nested Routes
Pagination
Redirect & Alias
Session 10
Q&A + Practice Session
Session 11
Vue router cont.
Dynamic routing
Route guards
Session 12
State management with Pinia
Core concepts
Session 13
State management with Pinia (2)
Session 14
Advanced Vue:
Composables
Custom directives
Built-in components
Session 15
Final project presentations
Prerequisites
Basic understanding of HTML & CSS
Basic knowledge of JavaScript and programming
Basic understanding of the DOM
Basic understanding of ES6 syntax and features
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
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 profileApply for this course
Introduction to Vue.js
by Dani Nebot
Total hours
45 Hours
Dates
Nov 07 - Nov 25, 2022
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.