# Vue.js grundkurs

Nivå: beginner | Målgrupp: Web-Apps programmerare | Förkunskaper: God erfarenhet av att programmera i JavaScript och HTML/CSS
https://www.ribomation.se/programmerings-kurser/vuejs/

Vue är ett kolossalt flexibelt ramverk för att bygga moderna webb-applikationer.
Med Vue kan du använda såväl klassisk som modern SPA (Single Page App) webb-arkitektur.

Vue är ett kolossalt flexibelt ramverk för att bygga moderna webb-applikationer.
Med Vue kan du använda såväl klassisk som modern SPA (Single Page App) webb-arkitektur.
Ett Vue system designas som en sammansättning av komponenter, vilka kan fungera som
navigerbara logiska sidor eller som återanvändbara byggblock inom logiska sidor.

Den här kursen bygger på Vue version 3 och primärt på Composition API, vilket är
vår övertygelse är klart bättre än det tidigare Options API.

- Know how to use and utilize SFC (Single File Components)
- Understand best practices of how to differentiate page, panel and widget components
- Know how to write parameterized page navigation
- Know how to communicate with a REST-WS back-end server

#### 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