Grundkurs i Vue.js

Vue.js Overview

• Why Vue.js was invented
• Evan You
• Release history
• Vue components

Part 1 - Preparation

We first discuss som topics that are pre-requisites for the course, to ensure all course participants has a good starting point.

Highlights of Modern JavaScript

• Lambda expressions
• Async functions
• Using the Object object
• The spread operator
• Array and object destructuring
• Classes
• Getters and setters
• Static members
• Subclasses
• Modules
• Export and import

ES Modules

• What is ESM
• ESM syntax
• Export forms
• Import forms
• Path forms
• ESM in browsers

Using NPM and NPX

• Using NPM
• Installing a NPM package
• Dependencies
• Global (script) packages
• Using NPX
• Alternatives to NPM

What is SPA (Single Page App)

• Classic web architecture
• Browser DOM
• Page navigation
• AJAX powered web app
• Partial HTTP transactions
• SPA web architecture
• Page components
• Navigation within an SPA
• SPA deployment architecture

Part 2 - Kickstart

How to build a Vue app step by step.

Embedded Vue

Instructions of how to build your first Vue app using CDN links.

Vue Basics

• Need a bundler
• Creating a Vue project using Vite
• Understanding SFC - Single File Component
• Understanding the difference between Options and Compositions API
• Using pre-processing languages

The SFC Version

Instructions of how to step by step build a multi widget SFC app.

Part 3 - The Details

Template Syntax

• Text interpolation
• Handlebar syntax
• JavaScript expressions only
• Prevent expression evaluation
• Injecting HTML
• Binding attributes
• v-bind
• Simplified syntax
• Dealing with events
• Modifiers
• Formatting functions

Reactivity

• Why do we need reactive?
• Reactive objects
• Restrictions
• Using ref()
• reactive() vs. ref()
• Understanding <script setup>

Directives

• What is a directive?
• Conditional rendering
• v-if, v-else-if, v-else
• v-show
• Usage of the <template> tag
• List rendering
• v-for over an array
• v-for over an object
• Usage of :key
• Composite iteration
• How to combine v-if with v-for

Form Field Value Bindings

• How to bind a reactive variable to a form field
• Using v-model
• Text modifiers
• Special handling for date fields
• Working with checkboxes
• Working with radio buttons
• Working with <select> fields

Components

• Local registration
• Global registration
• Declaring inputs: props
• Props typing
• Props requirements
• Props validation
• Passing values to props
• Declaring outputs: emits/events
• Event validation
• Event modifiers
• Key-event modifiers
• Fall-through attributes

Life-Cycle Hooks

• What is a hook?
• Mount hooks
• Other life-cycle hooks

Computed Properties

• What is computed property
• How to create a computed property
• Computer property with getter and setter

Watched Properties

• What is a watcher
• How to create and use a watcher
• Understanding watch() vs. watchEffects()

Using Slots

• Why do we need slots?
• Using a single slot
• Example Twitter Bootstrap Card widget
• Using named slots
• Using <Teleport>

Part 4 - Routing

The core essence of SPA is routing; i.e. how to provide the illusion of navigating to different logical pages, but still just restructuring the DOM tree.

Basic Routing

• What is routing?
• Understanding page components
• The minimum needed for a routing Vue app
• Importing the Router
• Defining routes
• Routed page layout
• Navigation links

More about Routing

• Access to the router and the current route
• Meta properties
• Programmatic navigation
• Named routes
• Redirects
• Not-found route (catch-all)
• Lazy-loaded page components
• Parameterized routes
• Route props
• Nested routes (child routes)

Guarded Navigation

• Understanding navigation gueards
• Guard forms
• Global guards
• Single route guards
• Page component guards

Part 5 - Production

Aspects when rolling out to production.

Build

• Development vs. production
• Building for production
• Build configuration
• Dealing with assets
• Conditional build
• Using .env files
• Setting build mode
• Reading configuration parameters within the app
• Tracking run-time errors

Deploy

• Server configuration
• Non-root context path

Server-Side App

• Understand the limitation of SPA
• Understand how to mitigate slow boot time
• Strategies for server-side rendering
• Brief about PWA

Part 6 - Libraries

An overview of some useful Vue libraries.

Pinia

• What is state management
• Understanding Pinia
• Concepts
• How to create a Pinia based Vue 3 app using Vite
• State
• Actions
• Getters

Vue i18n

• What is i18n?
• Overview of features
• Sample usage
• Key substitution
• How to change language

Vuetify

• What is Vuetify?
• Look and feel
• Components
• Usage