SlideShare a Scribd company logo
Introduction to web application development with Vue (for absolute beginners) (Conclusion Code Café - August 2023)
QUICK START
WEB
APPLICATION
DEVELOPMENT
WITH VUE3
ASSUMING HTML &
JAVASCRIPT SKILLS
Lucas Jellema
2
OVERVIEW
RAPID INTRODUCTION OF VUE 3
You will hear about web application development with Vue 3, see it in action and try it out yourself
You will not learn how it works – only to make it work for you. In a few hours from now, you will be able to develop
a rich, reactive, good looking and modern web application. You will learn how to develop and build and how to
publish (on GitHub Pages).
You need to know at least a little bit about HTML and JavaScript in order to be successful. It would not hurt to
have seen CSS and know your way around in the browser DevTools. A background in ASP.NET WebPages
(Razor), Flask, JavaServer Pages/JavaServer Faces, Low Code programming is a good startingpoint
If you know Vue 2 – you are overqualified for this session. With Angular, React or Svelte under your belt, you will
probably see similarities and differences. These will not be discussed.
3
AGENDA
• Introduction, background, history
• First steps with Vue – intro, demo & hands-on
• Components
• Expressions
• Properties, Slots, Events, Methods
• Dinner
• Closer to real world applications - – intro, demo & hands-on
• Reactive
• Software Engineering & Build
• State
• Component Libraries
• Publish Vue Web application on GitHub Pages
4
HOW THE WEB WAS WON…
5
HTML
images
THE STONE AGE OF WEB BROWSERS
• Browsers in mid ’90s:
• http requests for resources such as HTML files and images
• interpret HTML and present UI
• CSS (cascading style sheets) to apply style to structure
• support forms and button to submit form
• a tiny little bit of JavaScript (1995: Scheme, Mocha/Livescript, ..., ECMA Script – 1997, ES)
6
EARLIEST WEB APPLICATIONS
• Server side code handles HTTP Request
• serves static resources such as images and fixed HTML
• serves HTML pages – dynamically constructed
• Typical server side implementations
• PHP
• Java Servlets
followed by JavaServer Pages (JSPs)
and Apache Struts, Model View Controller (MVC)
• Perl
• Also: Java Applets, ActiveX, Flash (Shockwave player)
• mimic desktop experience from within the browser
• Browser [version] differences
7
Server
http request/response
BROWSER AND WEB EVOLUTION
• AJAX (Server Sent Requests, WebSockets, Web Workers)
• DHTML (Dynamic HTML – runtime client side HTML manipulation from JavaScript); jQuery
• Single Page [Web] Application (SPA)
• Reactive (event triggered processing)
• HTML5
• end of Java Applets and other plugins
• Mobile, progressive web app
• Desktop apps that are really web applications with prepackaged browser (Teams, VS Code, ..)
• frontend frameworks: AngularJS, Angular, React, Vue, Svelte, Aurelia, …
• Flutter, .NET Multi-platform App UI (MAUI)
• TypeScript – "JavaScript that scales "
8
[MY] WEB DEVELOPMENT FROM THE ’90S UNTIL TODAY
9
HTML 2,
JavaScript, CSS
Java Servlets
JSP (Java Server
Pages)
JavaServer Faces
(JSF)
Rich (AJAX powered) JSF
now
1999
2007
2009
Vue 3 + Vite
+ GitHub Pages
AJAX
HTML5
Reactive
AngularJS
MVVM
MVC
React
Vue
SPA
.. several failed
attempts at
mastering React …
Server side
HTML rendering
Client side
HTML rendering
Mix of client and server
side rendering
Svelte
Angular
Aurelia
TypeScript
DHTML
& jQuery
REACTIVE WEB DEVELOPMENT FRAMEWORKS
• Responsive, attractive, rich
• Structured, declarative/low code, simple to develop
• Scalable – complexity, team size
• Reuse of components
• Cross platform
• Software engineering and automation
• Tools for speeding up development | build | test | debug | monitor
• Community
• Pace of evolution
10
WHY VUE?
• I like it
• It is popular (and growing in popularity)
• It seems rich enough for many types of applications
• Vue can be a stepping stone:
Once you master Vue, adopting React and Angular will not be a huge step
• (Vue compared to React:) “Finding developers with Vue expertise is harder,
but teaching JavaScript developers how to use Vue is easier.”
11
COMPONENTS
• Vue applications are built from components
• A component is a building block that
• can render itself (HTML)
• performs logic (JavaScript)
• applies its own styles (CSS)
• holds its own state (local data)
• accepts properties to configure its behavior and appearance
• emits events to inform its parent component about actions
12
VUE COMPONENT
13
VUE COMPONENTS
14
VUE COMPONENTS
15
REUSE COMPONENTS
16
A VUE COMPONENT’S TEMPLATE CAN CONTAIN
• Standard HTML tags
• Custom Components
• such as MyComponent
• components from 3rd party libraries
• Vue attributes on standard tags
• v-if, v-else, v-for, ..
• JavaScript Expressions
• for attribute values – through :
• for event handling – through @
• for content rendering
moustache expression {{}}
17
A VUE COMPONENT’S TEMPLATE CAN CONTAIN
18
JAVASCRIPT EXPRESSIONS
• use locally defined functions and variables
• inside the component itself
• use any valid JavaScript function
• use a restricted list of globals
• including Regexp, Math, String and Date
19
Source code
BETWEEN DEVELOPMENT AND RUN IS TRANSPILATION
20
Source Code
Executable
Code
HTML,
JavaScript, CSS
.vue, TypeScript,
<anything>
CHILD COMPONENTS
• When you use a component, you can pass
• values for exposed properties
• content for predefined slots
• Capture and handle events emitted by the component
21
Component
properties
slots
slot X
slot Y
events
CHILD COMPONENT INTERACTIONS
22
SomeComponent
properties
MainComponent
<SomeComponent >
</SomeComponent>
<template>
</template>
<script setup>
import SomeComponent
from './SomeComponent.vue'
</script>
CHILD COMPONENTS - PROPERTIES
• When a component uses a child component it can pass values for properties to the child
• The properties are available as local read-only variables in the context of the child component
23
SomeComponent
properties
<p>{{nameOfProperty}}</p>
<input :value="nameOfProperty”>
</input>
MainComponent
<SomeComponent
nameOfProperty="value">
</SomeComponent>
CHILD COMPONENTS – SLOTS
FOR PASSING CONTENT FRAGMENTS TO CHILD
• When a component uses a child component it can pass fragments of (HTML) content to the child into
predefined slots
• These fragments are processed in the corresponding slot elements in the child’s template
24
SomeComponent
properties
<p>{{nameOfProperty}}</p>
<input :value="nameOfProperty”>
</input>
MainComponent
<SomeComponent
nameOfProperty="value">
</SomeComponent>
<slot> <slot />
<slot name="footer"> <slot />
slots
<template v-slot:footer>
<h3>Special Message </h3>
</template>
<div id="box">
<h1 class="teaser">Announcement</h1>
</div>
CHILD COMPONENTS – EMITTING EVENTS
• A [child] component can emit events – to inform a parent about something of interest
• Events can be captured and handled by the parent in JavaScript handlers
25
SomeComponent
properties
<p>{{nameOfProperty}}</p>
<input :value="nameOfProperty”>
</input>
MainComponent
<SomeComponent
nameOfProperty="value“
>
</SomeComponent>
<button @click="$emit('clicked')">
Please – click me!
</button>
<slot name="footer"> <slot />
slots
<template v-slot:footer>
<h3>Special Message </h3>
</template>
events
@clicked="(event) => {
console.log('CHILD CLICKED’)}"
METHODS
• Locally defined JavaScript functions can be invoked from expressions and as event handlers
27
SomeComponent
properties
<p>{{nameOfProperty}}</p>
<input :value="nameOfProperty”>
</input>
MainComponent
<template>
<SomeComponent
nameOfProperty="value"
@clicked=“clickHandler()" >
<SomeComponent />
</template> <button @click="$emit('clicked')">
Please – click me!
</button>
<slot name="footer"> <slot />
slots
<script setup>
function clickHandler() {
console.log('CHILD CLICKED')
}
</script>
events
STYLE
• Components can contain a <style> fragment – in addition to <template> and <script>
• Local CSS style definitions – intended only for the component itself – are defined here
28
MainComponent
<template>
<h1 class="yellow-page">Yellow Pages</h1>
<SomeComponent
nameOfProperty="value" >
<SomeComponent />
</template>
<script setup>
import SomeComponent from './SomeComponent.vue'
</script>
<style>
h1 {font-family: 'Courier New', Courier, monospace;}
.yellow-page {background-color: yellow;}
</style>
HANDSON - YOU GO PLAY!
• github.com/lucasjellema/code-face-vue3-intro-reactiive-webapps-aug2023
29
DINNER
30
AGENDA
• Introduction, background, history
• First steps with Vue – intro, demo & hands-on
• Components
• Expressions
• Properties, Slots, Events, Methods
• Dinner
• Closer to real world applications - – intro, demo & hands-on
• Reactive
• Software Engineering & Build
• State
• Component Libraries
• Publish Vue Web application on GitHub Pages
• Next steps …
31
REACTIVE
• Declarative two-way
binding from UI
Components to data
element
• All UI components that
depend on a data
element are refreshed
whenever the value
changes
• without explicit action
by the developer or
additional supporting
code
32
reactive
data
element
REACTIVE
• Declarative two-way
binding from UI
Components to data
element
• All UI components that
depend on a data
element are refreshed
whenever the value
changes
• without explicit action
by the developer or
additional supporting
code
33
reactive
data
element
The value: 42
Repeat: 42
42
REACTIVE – CHANGE TRIGGERS ACTION
• Declarative two-way
binding from UI
Components to data
element
• All UI components that
depend on a data
element are refreshed
whenever the value
changes
• without explicit action
by the developer or
additional supporting
code
34
reactive
data
element
The value: 42
Repeat: 42
42
13
Repeat: 13
The value: 13
REACTIVE
35
reactive
data
element
The value: 42
Repeat: is really is 42
42
PROGRAMMATIC MANIPULATION OF REACTIVE DATA
36
reactive
data
element
The value: 42
Repeat: is really is 42
42 Double
update the data
element to twice its
current value
function
PROGRAMMATIC MANIPULATION OF REACTIVE DATA
37
reactive
data
element
The value: 42
Repeat: is really is 42
42 Double
update the data
element to twice its
current value
function
VUE IN THE PLAYGROUND
38
DEMO REACTIVE TOGGLE
39
WATCH:
PROGRAMMATIC OBSERVATION OF REACTIVE DATA
40
reactive
data
element
The value: 42
Repeat: is really is 42
42
• Programmatic reaction to value change
• Configure a listener for a reactive data element
• to be invoked whenever the data changes
watcher
subscribe
WATCH
41
reactive
data
element
The value: 42
Repeat: is really is 42
42
watcher
subscribe
Double
update the data
element to twice its
current value
DECLARATIVE WATCHER: COMPUTED
42
reactive
data
element
The double value: 84
Repeat: is really is 42
42
watcher
subscribe
Double
update the data
element to twice its
current value
computed
property
doubeValue
AGENDA
• Introduction, background, history
• First steps with Vue – intro, demo & hands-on
• Components
• Expressions
• Properties, Slots, Events, Methods
• Dinner
• Closer to real world applications - – intro, demo & hands-on
• Reactive
• Software Engineering & Build
• State
• Component Libraries
• Publish Vue Web application on GitHub Pages
• Next steps …
43
VUE SOFTWARE DELIVERY PROCESS
44
Develop
Sources
(.vue, .html, npm
packages, …)
Format, QA,
Test,
Transpile,
Bundle
Deploy/Publish
& Run
code completion
formatting
syntax check | “compilation”
Hot Reload
VUE – SPECIAL DEVELOPMENT ENVIRONMENTS
• StackBlitz
• browser based – leveraging WebAssembly & WebContainer
• Node, npm, Vite all run inside your browser
• Gitpod.io
• cloud based, browser accessed
• Node, npm, Vite all run in an ephemeral cloud based Linux machine
– accessed through a browser
46
STACKBLITZ
47
GITPOD
48
AGENDA
• Introduction, background, history
• First steps with Vue – intro, demo & hands-on
• Components
• Expressions
• Properties, Slots, Events, Methods
• Dinner
• Closer to real world applications - – intro, demo & hands-on
• Reactive
• Software Engineering & Build
• State
• Component Libraries
• Publish Vue Web application on GitHub Pages
• Next steps …
49
STATE (MODEL) – CROSS COMPONENT DATA
• Components manage their own [internal] state
• parent inject properties into children
• children emit events for capture by parents
• Some state is
• retrieved from a backend service (database , API, file, ..)
• shared across multiple components
• Vue applications use “state stores” as containers for such state
• and decouple state management from UI components
50
state
stores
SHARED STATE MANAGED IN STATE STORE
ACROSS COMPONENTS
51
Component A
Component B
Component C
state
state store
getters
actions
SHARED STATE MANAGED IN STATE STORES
52
Component A
Component B
Component C
state
state
state stores
getters
actions
getters
actions
SHARED STATE MANAGED IN STATE STORES
53
Component A
Component B
Component C
state
state
state stores
getters
actions
getters
actions
Database
file
file
REST API
REST API
Server
Client
USING PINIA
• Instantiate Vue application with Pinia enabled or: npm install pinia --save
• Initialize Pinia and inject into Vue App
• Define Store – id, state, getters (computed), actions
• Use Store in Components
54
main.js App.vue HelloWorld.vue greetingState.js
USING PINIA
55
main.js App.vue HelloWorld.vue greetingState.js
USING PINIA STATE STORE ACROSS COMPONENTS
56
main.js App.vue HelloWorld.vue greetingState.js
MessageComposer.vue
USING PINIA STATE STORE ACROSS COMPONENTS
57
main.js App.vue HelloWorld.vue greetingState.js
MessageComposer.vue
AGENDA
• Introduction, background, history
• First steps with Vue – intro, demo & hands-on
• Components
• Expressions
• Properties, Slots, Events, Methods
• Dinner
• Closer to real world applications - – intro, demo & hands-on
• Reactive
• Software Engineering & Build
• State
• Component Libraries
• Publish Vue Web application on GitHub Pages
• Next steps …
58
ADVANCED USER INTERFACE FOR COMPLEX DATA
• Assume we have a complex data set that we want to present to the user
• can we use predefined UI components to quickly create a functionally rich and visually pleasing front end?
59
VUE COMPONENT LIBRARYS
• explore
• install
• use
6
PRIMEVUE COMPONENT LIBRARY
• explore
• install
• use
USE PRIMEVUE COMPONENT LIBRARY
• Dozens of components
• simple to quite complex
• Free to use
• Add to your application:
• npm install primevue --save
• Import PrimeVue component into
your component or view (or application wide)
• import PrimeVue from 'primevue/config';
• import DataTable from 'primevue/datatable’;
• Initialize use of PrimeVue in app.vue
• app.use(PrimeVue);
• Use PrimeVue component tag in your template
<DataTable :value="peopleStore.people" tableStyle="min-width: 50rem">
<Column field="first_name" header="First Name"> </Column>
62
EXAMPLE OF USING PRIMEVUE DATATABLE
63
PRIMEVUE DATATABLE FEATURES
• Structured, formatted presentation of data
• Sort
• Filter – global and per column
• Pagination
• Draggable Columns
• Expandable Rows
• Row selection
• Scrolling (frozen rows, frozen columns)
• Conditional styling
• Export (to CSV)
• Context Menu
• Keyboard support
64
AGENDA
• Introduction, background, history
• First steps with Vue – intro, demo & hands-on
• Components
• Expressions
• Properties, Slots, Events, Methods
• Dinner
• Closer to real world applications - – intro, demo & hands-on
• Reactive
• Software Engineering & Build
• State
• Component Libraries
• Publish Vue Web application on GitHub Pages
• Next steps …
65
PUBLISH AND SHARE YOUR WEB APP
66
PUBLISH VUE APPLICATION ON GITHUB PAGES
• Make your Vue application available on a public URL: everyone can access it
• One easy and free way: GitHub Pages
• expose static website from a GitHub Repository
67
STEPS WITH GITHUB PAGES
Preparation
• npm install gh-pages - -save-dev
• edit package.json: add scripts and homepage
• edit file vite.config.ts: add property base
For every release
• npm run deploy
68
QUICK SESSION OVERVIEW
• Components
• template, script, style
• {{ }} expressions and <tag :attribute @handler v-if: > annotated/wired attributes and handlers
• nested components – properties, slots, events
• Reactive
• declarative, two-way data binding
• Software Engineering
• IDE & development environment, code formatting, build, test, QA
• State Stores
• management of cross component session data
• Component Libraries
• productive, feature rich, high quality application development using 3rd party components
• Publish Vue application to the world
69
NEXT STEPS
• Play, Explore, Try Out
• Obvious first next topics
• Routing – navigation, multi-page
• Internationalization (i18n)
• Styling
• Add backend: interaction with Database, APIs
• Security
• Explore Component Libraries beyond PrimeVue
• Work on a private or shared Vue project – something to provide some scope, focus and purpose
• Have fun!
• Have a go at some of the additional labs for this session …
70
HANDSON - YOU GO PLAY!
• github.com/lucasjellema/code-face-vue3-intro-reactiive-webapps-aug2023
71
www.conclusion.nl
REACTIVE
• Declarative two-way
binding from UI
Components to data
element
• All UI components that
depend on a data
element are refreshed
whenever the value
changes
• without explicit action
by the developer or
additional supporting
code
73
reactive
data
element
{{msg}}
Hello World!
REACTIVE
• Declarative two-way
binding from UI
Components to data
element
• All UI components that
depend on a data
element are refreshed
whenever the value
changes
• without explicit action
by the developer or
additional supporting
code
74
reactive
data
element
{{msg}}
Hello World!
computed
reactive data
element
{{MSG}}
REACTIVE
• Declarative two-way
binding from UI
Components to data
element
• All UI components that
depend on a data
element are refreshed
whenever the value
changes
• without explicit action
by the developer or
additional supporting
code
75
reactive
data
element
{{msg}}
Hello World!
computed
reactive data
element
{{MSG}}
watch
watch
function
{{somethingCompletelyDifferent}}
INTERNATIONALIZATION (I18N)
• no boilerplate text in the code – all extracted into external files
• multiple languages/locales
• switching between locales
76
Ad

Recommended

Workshop 22: ReactJS Redux Advanced
Workshop 22: ReactJS Redux Advanced
Visual Engineering
 
Higher Order Components and Render Props
Higher Order Components and Render Props
Nitish Phanse
 
Progressive Web App
Progressive Web App
Subodh Garg
 
Angular overview
Angular overview
Thanvilahari
 
What is front-end development ?
What is front-end development ?
Mahmoud Shaker
 
Full-Stack Reactive with Spring WebFlux + Angular - JConf Colombia 2019
Full-Stack Reactive with Spring WebFlux + Angular - JConf Colombia 2019
Loiane Groner
 
Web Development In 2018
Web Development In 2018
Traversy Media
 
Introduction to Laravel Framework (5.2)
Introduction to Laravel Framework (5.2)
Viral Solani
 
ReactorKit으로 단방향 반응형 앱 만들기
ReactorKit으로 단방향 반응형 앱 만들기
Suyeol Jeon
 
Testing plan for an ecommerce site
Testing plan for an ecommerce site
Immortal Technologies
 
Implementing WebAuthn & FAPI supports on Keycloak
Implementing WebAuthn & FAPI supports on Keycloak
Yuichi Nakamura
 
Introduction to lightning Web Component
Introduction to lightning Web Component
Mohith Shrivastava
 
Intro to Salesforce Lightning Web Components (LWC)
Intro to Salesforce Lightning Web Components (LWC)
Roy Gilad
 
Virtual Meetup - API Security Best Practices
Virtual Meetup - API Security Best Practices
Jimmy Attia
 
Real Time Communication using Node.js and Socket.io
Real Time Communication using Node.js and Socket.io
Mindfire Solutions
 
CA Business Management Revision Notes: Strategic Management
CA Business Management Revision Notes: Strategic Management
khwaqar
 
VueJS Introduction
VueJS Introduction
David Ličen
 
Progressive Web Apps and React
Progressive Web Apps and React
Mike Melusky
 
Angular
Angular
khoado2002
 
Angular - Chapter 7 - HTTP Services
Angular - Chapter 7 - HTTP Services
WebStackAcademy
 
Api Testing.pdf
Api Testing.pdf
JitendraYadav351971
 
Supervisord 사용법을 간단히 알아보자!
Supervisord 사용법을 간단히 알아보자!
Kwangsik Lee
 
Exploring the Salesforce REST API
Exploring the Salesforce REST API
Salesforce Developers
 
Asynchronous stream processing with Akka Streams
Asynchronous stream processing with Akka Streams
Johan Andrén
 
Ajax.ppt
Ajax.ppt
MAGNA COLLEGE OF ENGINEERING
 
Welcome to the Government Success Platform
Welcome to the Government Success Platform
Salesforce Partners
 
OAuth with Salesforce - Demystified
OAuth with Salesforce - Demystified
Calvin Noronha
 
Jsf
Jsf
Anis Bouhachem Djer
 
VueJS: The Simple Revolution
VueJS: The Simple Revolution
Rafael Casuso Romate
 
Vue.js - An Introduction
Vue.js - An Introduction
saadulde
 

More Related Content

What's hot (20)

ReactorKit으로 단방향 반응형 앱 만들기
ReactorKit으로 단방향 반응형 앱 만들기
Suyeol Jeon
 
Testing plan for an ecommerce site
Testing plan for an ecommerce site
Immortal Technologies
 
Implementing WebAuthn & FAPI supports on Keycloak
Implementing WebAuthn & FAPI supports on Keycloak
Yuichi Nakamura
 
Introduction to lightning Web Component
Introduction to lightning Web Component
Mohith Shrivastava
 
Intro to Salesforce Lightning Web Components (LWC)
Intro to Salesforce Lightning Web Components (LWC)
Roy Gilad
 
Virtual Meetup - API Security Best Practices
Virtual Meetup - API Security Best Practices
Jimmy Attia
 
Real Time Communication using Node.js and Socket.io
Real Time Communication using Node.js and Socket.io
Mindfire Solutions
 
CA Business Management Revision Notes: Strategic Management
CA Business Management Revision Notes: Strategic Management
khwaqar
 
VueJS Introduction
VueJS Introduction
David Ličen
 
Progressive Web Apps and React
Progressive Web Apps and React
Mike Melusky
 
Angular
Angular
khoado2002
 
Angular - Chapter 7 - HTTP Services
Angular - Chapter 7 - HTTP Services
WebStackAcademy
 
Api Testing.pdf
Api Testing.pdf
JitendraYadav351971
 
Supervisord 사용법을 간단히 알아보자!
Supervisord 사용법을 간단히 알아보자!
Kwangsik Lee
 
Exploring the Salesforce REST API
Exploring the Salesforce REST API
Salesforce Developers
 
Asynchronous stream processing with Akka Streams
Asynchronous stream processing with Akka Streams
Johan Andrén
 
Ajax.ppt
Ajax.ppt
MAGNA COLLEGE OF ENGINEERING
 
Welcome to the Government Success Platform
Welcome to the Government Success Platform
Salesforce Partners
 
OAuth with Salesforce - Demystified
OAuth with Salesforce - Demystified
Calvin Noronha
 
Jsf
Jsf
Anis Bouhachem Djer
 
ReactorKit으로 단방향 반응형 앱 만들기
ReactorKit으로 단방향 반응형 앱 만들기
Suyeol Jeon
 
Implementing WebAuthn & FAPI supports on Keycloak
Implementing WebAuthn & FAPI supports on Keycloak
Yuichi Nakamura
 
Introduction to lightning Web Component
Introduction to lightning Web Component
Mohith Shrivastava
 
Intro to Salesforce Lightning Web Components (LWC)
Intro to Salesforce Lightning Web Components (LWC)
Roy Gilad
 
Virtual Meetup - API Security Best Practices
Virtual Meetup - API Security Best Practices
Jimmy Attia
 
Real Time Communication using Node.js and Socket.io
Real Time Communication using Node.js and Socket.io
Mindfire Solutions
 
CA Business Management Revision Notes: Strategic Management
CA Business Management Revision Notes: Strategic Management
khwaqar
 
VueJS Introduction
VueJS Introduction
David Ličen
 
Progressive Web Apps and React
Progressive Web Apps and React
Mike Melusky
 
Angular - Chapter 7 - HTTP Services
Angular - Chapter 7 - HTTP Services
WebStackAcademy
 
Supervisord 사용법을 간단히 알아보자!
Supervisord 사용법을 간단히 알아보자!
Kwangsik Lee
 
Asynchronous stream processing with Akka Streams
Asynchronous stream processing with Akka Streams
Johan Andrén
 
Welcome to the Government Success Platform
Welcome to the Government Success Platform
Salesforce Partners
 
OAuth with Salesforce - Demystified
OAuth with Salesforce - Demystified
Calvin Noronha
 

Similar to Introduction to web application development with Vue (for absolute beginners) (Conclusion Code Café - August 2023) (20)

VueJS: The Simple Revolution
VueJS: The Simple Revolution
Rafael Casuso Romate
 
Vue.js - An Introduction
Vue.js - An Introduction
saadulde
 
Vue.js
Vue.js
Jadson Santos
 
Basics of Vue.js 2019
Basics of Vue.js 2019
Paul Bele
 
Vue business first
Vue business first
Vitalii Ratyshnyi
 
ITB2019 ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 V...
ITB2019 ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 V...
Ortus Solutions, Corp
 
Introduction to Vue.js DevStaff Meetup 13.02
Introduction to Vue.js DevStaff Meetup 13.02
Paul Bele
 
Love at first Vue
Love at first Vue
Dalibor Gogic
 
VueJs Workshop
VueJs Workshop
Unfold UI
 
ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 VueJS cod...
ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 VueJS cod...
Gavin Pickin
 
The Point of Vue - Intro to Vue.js
The Point of Vue - Intro to Vue.js
Holly Schinsky
 
Why Choose Vue.js For Web Development Projects.pptx
Why Choose Vue.js For Web Development Projects.pptx
Scala Code
 
Don't Over-React - just use Vue!
Don't Over-React - just use Vue!
Raymond Camden
 
Vue.js Use Cases
Vue.js Use Cases
GlobalLogic Ukraine
 
VueJS Best Practices
VueJS Best Practices
Fatih Acet
 
Vue js and Vue Material
Vue js and Vue Material
Eueung Mulyana
 
Meet VueJs
Meet VueJs
Mathieu Breton
 
Vuejs
Vuejs
Mario Alexandro Santini
 
Vue.js
Vue.js
BADR
 
Why do JavaScript enthusiast think of Vue.js for building real-time web appli...
Why do JavaScript enthusiast think of Vue.js for building real-time web appli...
Katy Slemon
 
Vue.js - An Introduction
Vue.js - An Introduction
saadulde
 
Basics of Vue.js 2019
Basics of Vue.js 2019
Paul Bele
 
ITB2019 ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 V...
ITB2019 ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 V...
Ortus Solutions, Corp
 
Introduction to Vue.js DevStaff Meetup 13.02
Introduction to Vue.js DevStaff Meetup 13.02
Paul Bele
 
VueJs Workshop
VueJs Workshop
Unfold UI
 
ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 VueJS cod...
ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 VueJS cod...
Gavin Pickin
 
The Point of Vue - Intro to Vue.js
The Point of Vue - Intro to Vue.js
Holly Schinsky
 
Why Choose Vue.js For Web Development Projects.pptx
Why Choose Vue.js For Web Development Projects.pptx
Scala Code
 
Don't Over-React - just use Vue!
Don't Over-React - just use Vue!
Raymond Camden
 
VueJS Best Practices
VueJS Best Practices
Fatih Acet
 
Vue js and Vue Material
Vue js and Vue Material
Eueung Mulyana
 
Vue.js
Vue.js
BADR
 
Why do JavaScript enthusiast think of Vue.js for building real-time web appli...
Why do JavaScript enthusiast think of Vue.js for building real-time web appli...
Katy Slemon
 
Ad

More from Lucas Jellema (20)

Making the Shift Left - Bringing Ops to Dev before bringing applications to p...
Making the Shift Left - Bringing Ops to Dev before bringing applications to p...
Lucas Jellema
 
Lightweight coding in powerful Cloud Development Environments (DigitalXchange...
Lightweight coding in powerful Cloud Development Environments (DigitalXchange...
Lucas Jellema
 
Apache Superset - open source data exploration and visualization (Conclusion ...
Apache Superset - open source data exploration and visualization (Conclusion ...
Lucas Jellema
 
CONNECTING THE REAL WORLD TO ENTERPRISE IT – HOW IoT DRIVES OUR ENERGY TRANSI...
CONNECTING THE REAL WORLD TO ENTERPRISE IT – HOW IoT DRIVES OUR ENERGY TRANSI...
Lucas Jellema
 
Help me move away from Oracle - or not?! (Oracle Community Tour EMEA - LVOUG...
Help me move away from Oracle - or not?! (Oracle Community Tour EMEA - LVOUG...
Lucas Jellema
 
Op je vingers tellen... tot 1000!
Op je vingers tellen... tot 1000!
Lucas Jellema
 
IoT - from prototype to enterprise platform (DigitalXchange 2022)
IoT - from prototype to enterprise platform (DigitalXchange 2022)
Lucas Jellema
 
Who Wants to Become an IT Architect-A Look at the Bigger Picture - DigitalXch...
Who Wants to Become an IT Architect-A Look at the Bigger Picture - DigitalXch...
Lucas Jellema
 
Steampipe - use SQL to retrieve data from cloud, platforms and files (Code Ca...
Steampipe - use SQL to retrieve data from cloud, platforms and files (Code Ca...
Lucas Jellema
 
Automation of Software Engineering with OCI DevOps Build and Deployment Pipel...
Automation of Software Engineering with OCI DevOps Build and Deployment Pipel...
Lucas Jellema
 
Introducing Dapr.io - the open source personal assistant to microservices and...
Introducing Dapr.io - the open source personal assistant to microservices and...
Lucas Jellema
 
How and Why you can and should Participate in Open Source Projects (AMIS, Sof...
How and Why you can and should Participate in Open Source Projects (AMIS, Sof...
Lucas Jellema
 
Microservices, Apache Kafka, Node, Dapr and more - Part Two (Fontys Hogeschoo...
Microservices, Apache Kafka, Node, Dapr and more - Part Two (Fontys Hogeschoo...
Lucas Jellema
 
Microservices, Node, Dapr and more - Part One (Fontys Hogeschool, Spring 2022)
Microservices, Node, Dapr and more - Part One (Fontys Hogeschool, Spring 2022)
Lucas Jellema
 
6Reinventing Oracle Systems in a Cloudy World (RMOUG Trainingdays, February 2...
6Reinventing Oracle Systems in a Cloudy World (RMOUG Trainingdays, February 2...
Lucas Jellema
 
Help me move away from Oracle! (RMOUG Training Days 2022, February 2022)
Help me move away from Oracle! (RMOUG Training Days 2022, February 2022)
Lucas Jellema
 
Tech Talks 101 - DevOps (jan 2022)
Tech Talks 101 - DevOps (jan 2022)
Lucas Jellema
 
Conclusion Code Cafe - Microcks for Mocking and Testing Async APIs (January 2...
Conclusion Code Cafe - Microcks for Mocking and Testing Async APIs (January 2...
Lucas Jellema
 
Cloud Native Application Development - build fast, low TCO, scalable & agile ...
Cloud Native Application Development - build fast, low TCO, scalable & agile ...
Lucas Jellema
 
Software Engineering as the Next Level Up from Programming (Oracle Groundbrea...
Software Engineering as the Next Level Up from Programming (Oracle Groundbrea...
Lucas Jellema
 
Making the Shift Left - Bringing Ops to Dev before bringing applications to p...
Making the Shift Left - Bringing Ops to Dev before bringing applications to p...
Lucas Jellema
 
Lightweight coding in powerful Cloud Development Environments (DigitalXchange...
Lightweight coding in powerful Cloud Development Environments (DigitalXchange...
Lucas Jellema
 
Apache Superset - open source data exploration and visualization (Conclusion ...
Apache Superset - open source data exploration and visualization (Conclusion ...
Lucas Jellema
 
CONNECTING THE REAL WORLD TO ENTERPRISE IT – HOW IoT DRIVES OUR ENERGY TRANSI...
CONNECTING THE REAL WORLD TO ENTERPRISE IT – HOW IoT DRIVES OUR ENERGY TRANSI...
Lucas Jellema
 
Help me move away from Oracle - or not?! (Oracle Community Tour EMEA - LVOUG...
Help me move away from Oracle - or not?! (Oracle Community Tour EMEA - LVOUG...
Lucas Jellema
 
Op je vingers tellen... tot 1000!
Op je vingers tellen... tot 1000!
Lucas Jellema
 
IoT - from prototype to enterprise platform (DigitalXchange 2022)
IoT - from prototype to enterprise platform (DigitalXchange 2022)
Lucas Jellema
 
Who Wants to Become an IT Architect-A Look at the Bigger Picture - DigitalXch...
Who Wants to Become an IT Architect-A Look at the Bigger Picture - DigitalXch...
Lucas Jellema
 
Steampipe - use SQL to retrieve data from cloud, platforms and files (Code Ca...
Steampipe - use SQL to retrieve data from cloud, platforms and files (Code Ca...
Lucas Jellema
 
Automation of Software Engineering with OCI DevOps Build and Deployment Pipel...
Automation of Software Engineering with OCI DevOps Build and Deployment Pipel...
Lucas Jellema
 
Introducing Dapr.io - the open source personal assistant to microservices and...
Introducing Dapr.io - the open source personal assistant to microservices and...
Lucas Jellema
 
How and Why you can and should Participate in Open Source Projects (AMIS, Sof...
How and Why you can and should Participate in Open Source Projects (AMIS, Sof...
Lucas Jellema
 
Microservices, Apache Kafka, Node, Dapr and more - Part Two (Fontys Hogeschoo...
Microservices, Apache Kafka, Node, Dapr and more - Part Two (Fontys Hogeschoo...
Lucas Jellema
 
Microservices, Node, Dapr and more - Part One (Fontys Hogeschool, Spring 2022)
Microservices, Node, Dapr and more - Part One (Fontys Hogeschool, Spring 2022)
Lucas Jellema
 
6Reinventing Oracle Systems in a Cloudy World (RMOUG Trainingdays, February 2...
6Reinventing Oracle Systems in a Cloudy World (RMOUG Trainingdays, February 2...
Lucas Jellema
 
Help me move away from Oracle! (RMOUG Training Days 2022, February 2022)
Help me move away from Oracle! (RMOUG Training Days 2022, February 2022)
Lucas Jellema
 
Tech Talks 101 - DevOps (jan 2022)
Tech Talks 101 - DevOps (jan 2022)
Lucas Jellema
 
Conclusion Code Cafe - Microcks for Mocking and Testing Async APIs (January 2...
Conclusion Code Cafe - Microcks for Mocking and Testing Async APIs (January 2...
Lucas Jellema
 
Cloud Native Application Development - build fast, low TCO, scalable & agile ...
Cloud Native Application Development - build fast, low TCO, scalable & agile ...
Lucas Jellema
 
Software Engineering as the Next Level Up from Programming (Oracle Groundbrea...
Software Engineering as the Next Level Up from Programming (Oracle Groundbrea...
Lucas Jellema
 
Ad

Recently uploaded (20)

Automated Testing and Safety Analysis of Deep Neural Networks
Automated Testing and Safety Analysis of Deep Neural Networks
Lionel Briand
 
Zoho Creator Solution for EI by Elsner Technologies.docx
Zoho Creator Solution for EI by Elsner Technologies.docx
Elsner Technologies Pvt. Ltd.
 
NEW-IDM Crack with Internet Download Manager 6.42 Build 27 VERSION
NEW-IDM Crack with Internet Download Manager 6.42 Build 27 VERSION
grete1122g
 
CodeCleaner: Mitigating Data Contamination for LLM Benchmarking
CodeCleaner: Mitigating Data Contamination for LLM Benchmarking
arabelatso
 
Heat Treatment Process Automation in India
Heat Treatment Process Automation in India
Reckers Mechatronics
 
Best Practice for LLM Serving in the Cloud
Best Practice for LLM Serving in the Cloud
Alluxio, Inc.
 
Which Hiring Management Tools Offer the Best ROI?
Which Hiring Management Tools Offer the Best ROI?
HireME
 
Introduction to Agile Frameworks for Product Managers.pdf
Introduction to Agile Frameworks for Product Managers.pdf
Ali Vahed
 
Humans vs AI Call Agents - Qcall.ai's Special Report
Humans vs AI Call Agents - Qcall.ai's Special Report
Udit Goenka
 
Canva Pro Crack Free Download 2025-FREE LATEST
Canva Pro Crack Free Download 2025-FREE LATEST
grete1122g
 
Why Every Growing Business Needs a Staff Augmentation Company IN USA.pdf
Why Every Growing Business Needs a Staff Augmentation Company IN USA.pdf
mary rojas
 
declaration of Variables and constants.pptx
declaration of Variables and constants.pptx
meemee7378
 
Simplify Task, Team, and Project Management with Orangescrum Work
Simplify Task, Team, and Project Management with Orangescrum Work
Orangescrum
 
Download Adobe Illustrator Crack free for Windows 2025?
Download Adobe Illustrator Crack free for Windows 2025?
grete1122g
 
ERP Systems in the UAE: Driving Business Transformation with Smart Solutions
ERP Systems in the UAE: Driving Business Transformation with Smart Solutions
dheeodoo
 
Why Edge Computing Matters in Mobile Application Tech.pdf
Why Edge Computing Matters in Mobile Application Tech.pdf
IMG Global Infotech
 
Folding Cheat Sheet # 9 - List Unfolding 𝑢𝑛𝑓𝑜𝑙𝑑 as the Computational Dual of ...
Folding Cheat Sheet # 9 - List Unfolding 𝑢𝑛𝑓𝑜𝑙𝑑 as the Computational Dual of ...
Philip Schwarz
 
Enable Your Cloud Journey With Microsoft Trusted Partner | IFI Tech
Enable Your Cloud Journey With Microsoft Trusted Partner | IFI Tech
IFI Techsolutions
 
Building Geospatial Data Warehouse for GIS by GIS with FME
Building Geospatial Data Warehouse for GIS by GIS with FME
Safe Software
 
CodeCleaner: Mitigating Data Contamination for LLM Benchmarking
CodeCleaner: Mitigating Data Contamination for LLM Benchmarking
arabelatso
 
Automated Testing and Safety Analysis of Deep Neural Networks
Automated Testing and Safety Analysis of Deep Neural Networks
Lionel Briand
 
Zoho Creator Solution for EI by Elsner Technologies.docx
Zoho Creator Solution for EI by Elsner Technologies.docx
Elsner Technologies Pvt. Ltd.
 
NEW-IDM Crack with Internet Download Manager 6.42 Build 27 VERSION
NEW-IDM Crack with Internet Download Manager 6.42 Build 27 VERSION
grete1122g
 
CodeCleaner: Mitigating Data Contamination for LLM Benchmarking
CodeCleaner: Mitigating Data Contamination for LLM Benchmarking
arabelatso
 
Heat Treatment Process Automation in India
Heat Treatment Process Automation in India
Reckers Mechatronics
 
Best Practice for LLM Serving in the Cloud
Best Practice for LLM Serving in the Cloud
Alluxio, Inc.
 
Which Hiring Management Tools Offer the Best ROI?
Which Hiring Management Tools Offer the Best ROI?
HireME
 
Introduction to Agile Frameworks for Product Managers.pdf
Introduction to Agile Frameworks for Product Managers.pdf
Ali Vahed
 
Humans vs AI Call Agents - Qcall.ai's Special Report
Humans vs AI Call Agents - Qcall.ai's Special Report
Udit Goenka
 
Canva Pro Crack Free Download 2025-FREE LATEST
Canva Pro Crack Free Download 2025-FREE LATEST
grete1122g
 
Why Every Growing Business Needs a Staff Augmentation Company IN USA.pdf
Why Every Growing Business Needs a Staff Augmentation Company IN USA.pdf
mary rojas
 
declaration of Variables and constants.pptx
declaration of Variables and constants.pptx
meemee7378
 
Simplify Task, Team, and Project Management with Orangescrum Work
Simplify Task, Team, and Project Management with Orangescrum Work
Orangescrum
 
Download Adobe Illustrator Crack free for Windows 2025?
Download Adobe Illustrator Crack free for Windows 2025?
grete1122g
 
ERP Systems in the UAE: Driving Business Transformation with Smart Solutions
ERP Systems in the UAE: Driving Business Transformation with Smart Solutions
dheeodoo
 
Why Edge Computing Matters in Mobile Application Tech.pdf
Why Edge Computing Matters in Mobile Application Tech.pdf
IMG Global Infotech
 
Folding Cheat Sheet # 9 - List Unfolding 𝑢𝑛𝑓𝑜𝑙𝑑 as the Computational Dual of ...
Folding Cheat Sheet # 9 - List Unfolding 𝑢𝑛𝑓𝑜𝑙𝑑 as the Computational Dual of ...
Philip Schwarz
 
Enable Your Cloud Journey With Microsoft Trusted Partner | IFI Tech
Enable Your Cloud Journey With Microsoft Trusted Partner | IFI Tech
IFI Techsolutions
 
Building Geospatial Data Warehouse for GIS by GIS with FME
Building Geospatial Data Warehouse for GIS by GIS with FME
Safe Software
 
CodeCleaner: Mitigating Data Contamination for LLM Benchmarking
CodeCleaner: Mitigating Data Contamination for LLM Benchmarking
arabelatso
 

Introduction to web application development with Vue (for absolute beginners) (Conclusion Code Café - August 2023)

  • 2. QUICK START WEB APPLICATION DEVELOPMENT WITH VUE3 ASSUMING HTML & JAVASCRIPT SKILLS Lucas Jellema 2
  • 3. OVERVIEW RAPID INTRODUCTION OF VUE 3 You will hear about web application development with Vue 3, see it in action and try it out yourself You will not learn how it works – only to make it work for you. In a few hours from now, you will be able to develop a rich, reactive, good looking and modern web application. You will learn how to develop and build and how to publish (on GitHub Pages). You need to know at least a little bit about HTML and JavaScript in order to be successful. It would not hurt to have seen CSS and know your way around in the browser DevTools. A background in ASP.NET WebPages (Razor), Flask, JavaServer Pages/JavaServer Faces, Low Code programming is a good startingpoint If you know Vue 2 – you are overqualified for this session. With Angular, React or Svelte under your belt, you will probably see similarities and differences. These will not be discussed. 3
  • 4. AGENDA • Introduction, background, history • First steps with Vue – intro, demo & hands-on • Components • Expressions • Properties, Slots, Events, Methods • Dinner • Closer to real world applications - – intro, demo & hands-on • Reactive • Software Engineering & Build • State • Component Libraries • Publish Vue Web application on GitHub Pages 4
  • 5. HOW THE WEB WAS WON… 5 HTML images
  • 6. THE STONE AGE OF WEB BROWSERS • Browsers in mid ’90s: • http requests for resources such as HTML files and images • interpret HTML and present UI • CSS (cascading style sheets) to apply style to structure • support forms and button to submit form • a tiny little bit of JavaScript (1995: Scheme, Mocha/Livescript, ..., ECMA Script – 1997, ES) 6
  • 7. EARLIEST WEB APPLICATIONS • Server side code handles HTTP Request • serves static resources such as images and fixed HTML • serves HTML pages – dynamically constructed • Typical server side implementations • PHP • Java Servlets followed by JavaServer Pages (JSPs) and Apache Struts, Model View Controller (MVC) • Perl • Also: Java Applets, ActiveX, Flash (Shockwave player) • mimic desktop experience from within the browser • Browser [version] differences 7 Server http request/response
  • 8. BROWSER AND WEB EVOLUTION • AJAX (Server Sent Requests, WebSockets, Web Workers) • DHTML (Dynamic HTML – runtime client side HTML manipulation from JavaScript); jQuery • Single Page [Web] Application (SPA) • Reactive (event triggered processing) • HTML5 • end of Java Applets and other plugins • Mobile, progressive web app • Desktop apps that are really web applications with prepackaged browser (Teams, VS Code, ..) • frontend frameworks: AngularJS, Angular, React, Vue, Svelte, Aurelia, … • Flutter, .NET Multi-platform App UI (MAUI) • TypeScript – "JavaScript that scales " 8
  • 9. [MY] WEB DEVELOPMENT FROM THE ’90S UNTIL TODAY 9 HTML 2, JavaScript, CSS Java Servlets JSP (Java Server Pages) JavaServer Faces (JSF) Rich (AJAX powered) JSF now 1999 2007 2009 Vue 3 + Vite + GitHub Pages AJAX HTML5 Reactive AngularJS MVVM MVC React Vue SPA .. several failed attempts at mastering React … Server side HTML rendering Client side HTML rendering Mix of client and server side rendering Svelte Angular Aurelia TypeScript DHTML & jQuery
  • 10. REACTIVE WEB DEVELOPMENT FRAMEWORKS • Responsive, attractive, rich • Structured, declarative/low code, simple to develop • Scalable – complexity, team size • Reuse of components • Cross platform • Software engineering and automation • Tools for speeding up development | build | test | debug | monitor • Community • Pace of evolution 10
  • 11. WHY VUE? • I like it • It is popular (and growing in popularity) • It seems rich enough for many types of applications • Vue can be a stepping stone: Once you master Vue, adopting React and Angular will not be a huge step • (Vue compared to React:) “Finding developers with Vue expertise is harder, but teaching JavaScript developers how to use Vue is easier.” 11
  • 12. COMPONENTS • Vue applications are built from components • A component is a building block that • can render itself (HTML) • performs logic (JavaScript) • applies its own styles (CSS) • holds its own state (local data) • accepts properties to configure its behavior and appearance • emits events to inform its parent component about actions 12
  • 17. A VUE COMPONENT’S TEMPLATE CAN CONTAIN • Standard HTML tags • Custom Components • such as MyComponent • components from 3rd party libraries • Vue attributes on standard tags • v-if, v-else, v-for, .. • JavaScript Expressions • for attribute values – through : • for event handling – through @ • for content rendering moustache expression {{}} 17
  • 18. A VUE COMPONENT’S TEMPLATE CAN CONTAIN 18
  • 19. JAVASCRIPT EXPRESSIONS • use locally defined functions and variables • inside the component itself • use any valid JavaScript function • use a restricted list of globals • including Regexp, Math, String and Date 19
  • 20. Source code BETWEEN DEVELOPMENT AND RUN IS TRANSPILATION 20 Source Code Executable Code HTML, JavaScript, CSS .vue, TypeScript, <anything>
  • 21. CHILD COMPONENTS • When you use a component, you can pass • values for exposed properties • content for predefined slots • Capture and handle events emitted by the component 21 Component properties slots slot X slot Y events
  • 22. CHILD COMPONENT INTERACTIONS 22 SomeComponent properties MainComponent <SomeComponent > </SomeComponent> <template> </template> <script setup> import SomeComponent from './SomeComponent.vue' </script>
  • 23. CHILD COMPONENTS - PROPERTIES • When a component uses a child component it can pass values for properties to the child • The properties are available as local read-only variables in the context of the child component 23 SomeComponent properties <p>{{nameOfProperty}}</p> <input :value="nameOfProperty”> </input> MainComponent <SomeComponent nameOfProperty="value"> </SomeComponent>
  • 24. CHILD COMPONENTS – SLOTS FOR PASSING CONTENT FRAGMENTS TO CHILD • When a component uses a child component it can pass fragments of (HTML) content to the child into predefined slots • These fragments are processed in the corresponding slot elements in the child’s template 24 SomeComponent properties <p>{{nameOfProperty}}</p> <input :value="nameOfProperty”> </input> MainComponent <SomeComponent nameOfProperty="value"> </SomeComponent> <slot> <slot /> <slot name="footer"> <slot /> slots <template v-slot:footer> <h3>Special Message </h3> </template> <div id="box"> <h1 class="teaser">Announcement</h1> </div>
  • 25. CHILD COMPONENTS – EMITTING EVENTS • A [child] component can emit events – to inform a parent about something of interest • Events can be captured and handled by the parent in JavaScript handlers 25 SomeComponent properties <p>{{nameOfProperty}}</p> <input :value="nameOfProperty”> </input> MainComponent <SomeComponent nameOfProperty="value“ > </SomeComponent> <button @click="$emit('clicked')"> Please – click me! </button> <slot name="footer"> <slot /> slots <template v-slot:footer> <h3>Special Message </h3> </template> events @clicked="(event) => { console.log('CHILD CLICKED’)}"
  • 26. METHODS • Locally defined JavaScript functions can be invoked from expressions and as event handlers 27 SomeComponent properties <p>{{nameOfProperty}}</p> <input :value="nameOfProperty”> </input> MainComponent <template> <SomeComponent nameOfProperty="value" @clicked=“clickHandler()" > <SomeComponent /> </template> <button @click="$emit('clicked')"> Please – click me! </button> <slot name="footer"> <slot /> slots <script setup> function clickHandler() { console.log('CHILD CLICKED') } </script> events
  • 27. STYLE • Components can contain a <style> fragment – in addition to <template> and <script> • Local CSS style definitions – intended only for the component itself – are defined here 28 MainComponent <template> <h1 class="yellow-page">Yellow Pages</h1> <SomeComponent nameOfProperty="value" > <SomeComponent /> </template> <script setup> import SomeComponent from './SomeComponent.vue' </script> <style> h1 {font-family: 'Courier New', Courier, monospace;} .yellow-page {background-color: yellow;} </style>
  • 28. HANDSON - YOU GO PLAY! • github.com/lucasjellema/code-face-vue3-intro-reactiive-webapps-aug2023 29
  • 30. AGENDA • Introduction, background, history • First steps with Vue – intro, demo & hands-on • Components • Expressions • Properties, Slots, Events, Methods • Dinner • Closer to real world applications - – intro, demo & hands-on • Reactive • Software Engineering & Build • State • Component Libraries • Publish Vue Web application on GitHub Pages • Next steps … 31
  • 31. REACTIVE • Declarative two-way binding from UI Components to data element • All UI components that depend on a data element are refreshed whenever the value changes • without explicit action by the developer or additional supporting code 32 reactive data element
  • 32. REACTIVE • Declarative two-way binding from UI Components to data element • All UI components that depend on a data element are refreshed whenever the value changes • without explicit action by the developer or additional supporting code 33 reactive data element The value: 42 Repeat: 42 42
  • 33. REACTIVE – CHANGE TRIGGERS ACTION • Declarative two-way binding from UI Components to data element • All UI components that depend on a data element are refreshed whenever the value changes • without explicit action by the developer or additional supporting code 34 reactive data element The value: 42 Repeat: 42 42 13 Repeat: 13 The value: 13
  • 35. PROGRAMMATIC MANIPULATION OF REACTIVE DATA 36 reactive data element The value: 42 Repeat: is really is 42 42 Double update the data element to twice its current value function
  • 36. PROGRAMMATIC MANIPULATION OF REACTIVE DATA 37 reactive data element The value: 42 Repeat: is really is 42 42 Double update the data element to twice its current value function
  • 37. VUE IN THE PLAYGROUND 38
  • 39. WATCH: PROGRAMMATIC OBSERVATION OF REACTIVE DATA 40 reactive data element The value: 42 Repeat: is really is 42 42 • Programmatic reaction to value change • Configure a listener for a reactive data element • to be invoked whenever the data changes watcher subscribe
  • 40. WATCH 41 reactive data element The value: 42 Repeat: is really is 42 42 watcher subscribe Double update the data element to twice its current value
  • 41. DECLARATIVE WATCHER: COMPUTED 42 reactive data element The double value: 84 Repeat: is really is 42 42 watcher subscribe Double update the data element to twice its current value computed property doubeValue
  • 42. AGENDA • Introduction, background, history • First steps with Vue – intro, demo & hands-on • Components • Expressions • Properties, Slots, Events, Methods • Dinner • Closer to real world applications - – intro, demo & hands-on • Reactive • Software Engineering & Build • State • Component Libraries • Publish Vue Web application on GitHub Pages • Next steps … 43
  • 43. VUE SOFTWARE DELIVERY PROCESS 44 Develop Sources (.vue, .html, npm packages, …) Format, QA, Test, Transpile, Bundle Deploy/Publish & Run code completion formatting syntax check | “compilation” Hot Reload
  • 44. VUE – SPECIAL DEVELOPMENT ENVIRONMENTS • StackBlitz • browser based – leveraging WebAssembly & WebContainer • Node, npm, Vite all run inside your browser • Gitpod.io • cloud based, browser accessed • Node, npm, Vite all run in an ephemeral cloud based Linux machine – accessed through a browser 46
  • 47. AGENDA • Introduction, background, history • First steps with Vue – intro, demo & hands-on • Components • Expressions • Properties, Slots, Events, Methods • Dinner • Closer to real world applications - – intro, demo & hands-on • Reactive • Software Engineering & Build • State • Component Libraries • Publish Vue Web application on GitHub Pages • Next steps … 49
  • 48. STATE (MODEL) – CROSS COMPONENT DATA • Components manage their own [internal] state • parent inject properties into children • children emit events for capture by parents • Some state is • retrieved from a backend service (database , API, file, ..) • shared across multiple components • Vue applications use “state stores” as containers for such state • and decouple state management from UI components 50 state stores
  • 49. SHARED STATE MANAGED IN STATE STORE ACROSS COMPONENTS 51 Component A Component B Component C state state store getters actions
  • 50. SHARED STATE MANAGED IN STATE STORES 52 Component A Component B Component C state state state stores getters actions getters actions
  • 51. SHARED STATE MANAGED IN STATE STORES 53 Component A Component B Component C state state state stores getters actions getters actions Database file file REST API REST API Server Client
  • 52. USING PINIA • Instantiate Vue application with Pinia enabled or: npm install pinia --save • Initialize Pinia and inject into Vue App • Define Store – id, state, getters (computed), actions • Use Store in Components 54 main.js App.vue HelloWorld.vue greetingState.js
  • 53. USING PINIA 55 main.js App.vue HelloWorld.vue greetingState.js
  • 54. USING PINIA STATE STORE ACROSS COMPONENTS 56 main.js App.vue HelloWorld.vue greetingState.js MessageComposer.vue
  • 55. USING PINIA STATE STORE ACROSS COMPONENTS 57 main.js App.vue HelloWorld.vue greetingState.js MessageComposer.vue
  • 56. AGENDA • Introduction, background, history • First steps with Vue – intro, demo & hands-on • Components • Expressions • Properties, Slots, Events, Methods • Dinner • Closer to real world applications - – intro, demo & hands-on • Reactive • Software Engineering & Build • State • Component Libraries • Publish Vue Web application on GitHub Pages • Next steps … 58
  • 57. ADVANCED USER INTERFACE FOR COMPLEX DATA • Assume we have a complex data set that we want to present to the user • can we use predefined UI components to quickly create a functionally rich and visually pleasing front end? 59
  • 58. VUE COMPONENT LIBRARYS • explore • install • use 6
  • 59. PRIMEVUE COMPONENT LIBRARY • explore • install • use
  • 60. USE PRIMEVUE COMPONENT LIBRARY • Dozens of components • simple to quite complex • Free to use • Add to your application: • npm install primevue --save • Import PrimeVue component into your component or view (or application wide) • import PrimeVue from 'primevue/config'; • import DataTable from 'primevue/datatable’; • Initialize use of PrimeVue in app.vue • app.use(PrimeVue); • Use PrimeVue component tag in your template <DataTable :value="peopleStore.people" tableStyle="min-width: 50rem"> <Column field="first_name" header="First Name"> </Column> 62
  • 61. EXAMPLE OF USING PRIMEVUE DATATABLE 63
  • 62. PRIMEVUE DATATABLE FEATURES • Structured, formatted presentation of data • Sort • Filter – global and per column • Pagination • Draggable Columns • Expandable Rows • Row selection • Scrolling (frozen rows, frozen columns) • Conditional styling • Export (to CSV) • Context Menu • Keyboard support 64
  • 63. AGENDA • Introduction, background, history • First steps with Vue – intro, demo & hands-on • Components • Expressions • Properties, Slots, Events, Methods • Dinner • Closer to real world applications - – intro, demo & hands-on • Reactive • Software Engineering & Build • State • Component Libraries • Publish Vue Web application on GitHub Pages • Next steps … 65
  • 64. PUBLISH AND SHARE YOUR WEB APP 66
  • 65. PUBLISH VUE APPLICATION ON GITHUB PAGES • Make your Vue application available on a public URL: everyone can access it • One easy and free way: GitHub Pages • expose static website from a GitHub Repository 67
  • 66. STEPS WITH GITHUB PAGES Preparation • npm install gh-pages - -save-dev • edit package.json: add scripts and homepage • edit file vite.config.ts: add property base For every release • npm run deploy 68
  • 67. QUICK SESSION OVERVIEW • Components • template, script, style • {{ }} expressions and <tag :attribute @handler v-if: > annotated/wired attributes and handlers • nested components – properties, slots, events • Reactive • declarative, two-way data binding • Software Engineering • IDE & development environment, code formatting, build, test, QA • State Stores • management of cross component session data • Component Libraries • productive, feature rich, high quality application development using 3rd party components • Publish Vue application to the world 69
  • 68. NEXT STEPS • Play, Explore, Try Out • Obvious first next topics • Routing – navigation, multi-page • Internationalization (i18n) • Styling • Add backend: interaction with Database, APIs • Security • Explore Component Libraries beyond PrimeVue • Work on a private or shared Vue project – something to provide some scope, focus and purpose • Have fun! • Have a go at some of the additional labs for this session … 70
  • 69. HANDSON - YOU GO PLAY! • github.com/lucasjellema/code-face-vue3-intro-reactiive-webapps-aug2023 71
  • 71. REACTIVE • Declarative two-way binding from UI Components to data element • All UI components that depend on a data element are refreshed whenever the value changes • without explicit action by the developer or additional supporting code 73 reactive data element {{msg}} Hello World!
  • 72. REACTIVE • Declarative two-way binding from UI Components to data element • All UI components that depend on a data element are refreshed whenever the value changes • without explicit action by the developer or additional supporting code 74 reactive data element {{msg}} Hello World! computed reactive data element {{MSG}}
  • 73. REACTIVE • Declarative two-way binding from UI Components to data element • All UI components that depend on a data element are refreshed whenever the value changes • without explicit action by the developer or additional supporting code 75 reactive data element {{msg}} Hello World! computed reactive data element {{MSG}} watch watch function {{somethingCompletelyDifferent}}
  • 74. INTERNATIONALIZATION (I18N) • no boilerplate text in the code – all extracted into external files • multiple languages/locales • switching between locales 76

Editor's Notes

  • #6: https://auth0.com/blog/a-brief-history-of-javascript/
  • #7: https://auth0.com/blog/a-brief-history-of-javascript/
  • #8: https://auth0.com/blog/a-brief-history-of-javascript/
  • #18: https://play.vuejs.org/#eNp9U01v00AQ/SujvbgVIVYbDihyI6CtBEh8CHJjOTj2JN52vWvtrpOgyP+dtzZOLQS9zc68N37zZnwSb5tmvm9ZLIU0WeC60XnglTREWXW1WldMQGhV5EFZk6XI9bVS7fsgwharOw650p6sodPJ8IHu0OTisutAWIy4T79ubd1YwyZQeiZf0/6l2t5I4St7WKugWYrVrTWlih/MNfU59LkeKa3+EyHWCvStdeAriCdl6EeSJ7Nkk8woKZKfaDaCI2AJfX1AXXdukmo19k7PzTNlmjbQEn4UXFldcvzI9esXV6+keNK/aUPA1G8KWPQIQGGNt5rn2u4ukoq1tnSwTpfJJZS8j+8sHTiDj2k0kgjepxPz8fSFU00gz6FteqiCdy7Q1MWtszVJMU8nybhMiV1GShSDFqOxN8Ghhi8NvVdiJoIHZqt28wdvDW7gFGlxirpRmt2XJi7BSwHfhoGlyDHD4WOfi/1mY76ouHj8R/7BH2NOiq+OPbs91J1rIXc7DkP5/vtnPiI+F2tbtvEanil+Y5jdRo0D7F1rSsie4Hq1H3rrlNmt/f0xsPHjUIMhRF2PlwLeRSP/N/qT3MV80fOk6eDiX/bDx8mf5Po9N1i+Y2yk1SVtmHIybb1hR3ZLuN+aWHMNvp8NhHivdb5jT7kpyYYK0AbvuFNMELIUVwHk9GzwFN1v4YU/Yg==
  • #19: https://play.vuejs.org/#eNp9U01v00AQ/SujvbgVIVYbDihyI6CtBEh8CHJjOTj2JN52vWvtrpOgyP+dtzZOLQS9zc68N37zZnwSb5tmvm9ZLIU0WeC60XnglTREWXW1WldMQGhV5EFZk6XI9bVS7fsgwharOw650p6sodPJ8IHu0OTisutAWIy4T79ubd1YwyZQeiZf0/6l2t5I4St7WKugWYrVrTWlih/MNfU59LkeKa3+EyHWCvStdeAriCdl6EeSJ7Nkk8woKZKfaDaCI2AJfX1AXXdukmo19k7PzTNlmjbQEn4UXFldcvzI9esXV6+keNK/aUPA1G8KWPQIQGGNt5rn2u4ukoq1tnSwTpfJJZS8j+8sHTiDj2k0kgjepxPz8fSFU00gz6FteqiCdy7Q1MWtszVJMU8nybhMiV1GShSDFqOxN8Ghhi8NvVdiJoIHZqt28wdvDW7gFGlxirpRmt2XJi7BSwHfhoGlyDHD4WOfi/1mY76ouHj8R/7BH2NOiq+OPbs91J1rIXc7DkP5/vtnPiI+F2tbtvEanil+Y5jdRo0D7F1rSsie4Hq1H3rrlNmt/f0xsPHjUIMhRF2PlwLeRSP/N/qT3MV80fOk6eDiX/bDx8mf5Po9N1i+Y2yk1SVtmHIybb1hR3ZLuN+aWHMNvp8NhHivdb5jT7kpyYYK0AbvuFNMELIUVwHk9GzwFN1v4YU/Yg==
  • #22: https://play.vuejs.org/#eNqVU1Fv2jAQ/iuWNSkgUaKqe0IBtTA0bdoKGtNe5j6k4QAXx45sh1JF+e87Xwg0W1VpiIfc3Xd3n+++q/hdUQwPJfART1xmZeGZA18WE6GFlnlhrGerAjKZqmnpvdFsY03OomHc8YYSUUjJjHYeMaX0bMwEX3mbPj+CtS+CC53ETQ+qnnjIC5V6QIuxpNtl5KVXMBacSgnObl0Tv4IDaI+BHn302XjCKhbaGgVDZbYnf43NqTD+ViYHNjPaY+DkOjdnhyunjB9tjPFg24xk93GyVJA6YG6XWmAvprRsjQycRHb4rypiVtdJjNg2Le6+qTsk8oUhnEF8wL1D7hu5HT45o3ELFYF4ZvJCKrCLwmNDJ/iIUSTEUqXM81fyeVvCoPVnO8j2b/if3DH4BF9acGAPIPg55lO7BZxvCM9X93DE73MwN+tSIfqd4A/AuZeBYwOblnqNtF/hiO0XUpLU259ufsQ1hCmeiQZkTXjBUUezd55+oXszvKE8oWuc4j9iDHq+7MLSNnbXk6oiXdHWrlt/2D+LW+uxEeBtpmS2R519gFz6XnSS3zyIKxpEnxeLT1EfJTYLMLYxln2Te0jiJv3/ik3v/q51j4xWhn0vs92bdYmyTnO6EFIupuN1oZsgr4WIJrm650116G48K6wpHJ7rGjZSwzJYvd8RTSp66Heggf8FOg8WQtv3/ArveeizhsLp1nn9B120fas=
  • #27: https://play.vuejs.org/#eNqVU1Fv2jAQ/iuWNSkgUaKqe0IBtTA0bdoKGtNe5j6k4QAXx45sh1JF+e87Xwg0W1VpiIfc3Xd3n+++q/hdUQwPJfART1xmZeGZA18WE6GFlnlhrGerAjKZqmnpvdFsY03OomHc8YYSUUjJjHYeMaX0bMwEX3mbPj+CtS+CC53ETQ+qnnjIC5V6QIuxpNtl5KVXMBacSgnObl0Tv4IDaI+BHn302XjCKhbaGgVDZbYnf43NqTD+ViYHNjPaY+DkOjdnhyunjB9tjPFg24xk93GyVJA6YG6XWmAvprRsjQycRHb4rypiVtdJjNg2Le6+qTsk8oUhnEF8wL1D7hu5HT45o3ELFYF4ZvJCKrCLwmNDJ/iIUSTEUqXM81fyeVvCoPVnO8j2b/if3DH4BF9acGAPIPg55lO7BZxvCM9X93DE73MwN+tSIfqd4A/AuZeBYwOblnqNtF/hiO0XUpLU259ufsQ1hCmeiQZkTXjBUUezd55+oXszvKE8oWuc4j9iDHq+7MLSNnbXk6oiXdHWrlt/2D+LW+uxEeBtpmS2R519gFz6XnSS3zyIKxpEnxeLT1EfJTYLMLYxln2Te0jiJv3/ik3v/q51j4xWhn0vs92bdYmyTnO6EFIupuN1oZsgr4WIJrm650116G48K6wpHJ7rGjZSwzJYvd8RTSp66Heggf8FOg8WQtv3/ArveeizhsLp1nn9B120fas=
  • #36: https://play.vuejs.org/#eNp9kU9PAjEQxb9K0wtqFCJ4IgvxDxz0oAaJp16WZYBCt23a6Yoh+92ddgOSiNzaeb/XvpnZ8Qdr21UA3ucZQmlVjjAUmrFsdTucroB95ioAk57tdsxBXqCsYJRjPlZQgkZW11mH0MbSG07AQo59JjHSSn031hPOZOw1RqltQFbdlGYOaiD4CVzwBp0FRKPZfaFksSF0bsJMwcUl6aN0zDoNQnjWOWqJrr5w0iLzgMFSRZbWOGSxrwWr2cKZkrVoFq0IF0b71MOfjgeRv2jddVuXEVwETQhF2iehB2PSE9Z2lYYZH/hHu+oKXaesnSZsCs6vOXoKtJDL9tobTcvaxS8EL0xppQL3ZmMEL3ifJSVqNH3z9ZJq6AJc7+vFCorNifrab2NN8HcHHlwFgh80zN0SaAdRHn+8wpbOB5G2FhTRZ8QJeKNCzNhgj0HPKfYRl9I+p41IvZz68RZB+31TMWgk68QLTlt6OtP6b9xeu5d8NFZe/wCjXv/t
  • #37: https://play.vuejs.org/#eNp9kU9PAjEQxb9K0wtqFCJ4IgvxDxz0oAaJp16WZYBCt23a6Yoh+92ddgOSiNzaeb/XvpnZ8Qdr21UA3ucZQmlVjjAUmrFsdTucroB95ioAk57tdsxBXqCsYJRjPlZQgkZW11mH0MbSG07AQo59JjHSSn031hPOZOw1RqltQFbdlGYOaiD4CVzwBp0FRKPZfaFksSF0bsJMwcUl6aN0zDoNQnjWOWqJrr5w0iLzgMFSRZbWOGSxrwWr2cKZkrVoFq0IF0b71MOfjgeRv2jddVuXEVwETQhF2iehB2PSE9Z2lYYZH/hHu+oKXaesnSZsCs6vOXoKtJDL9tobTcvaxS8EL0xppQL3ZmMEL3ifJSVqNH3z9ZJq6AJc7+vFCorNifrab2NN8HcHHlwFgh80zN0SaAdRHn+8wpbOB5G2FhTRZ8QJeKNCzNhgj0HPKfYRl9I+p41IvZz68RZB+31TMWgk68QLTlt6OtP6b9xeu5d8NFZe/wCjXv/t
  • #38: https://play.vuejs.org/#eNp9kU9PAjEQxb9K0wtqFCJ4IgvxDxz0oAaJp16WZYBCt23a6Yoh+92ddgOSiNzaeb/XvpnZ8Qdr21UA3ucZQmlVjjAUmrFsdTucroB95ioAk57tdsxBXqCsYJRjPlZQgkZW11mH0MbSG07AQo59JjHSSn031hPOZOw1RqltQFbdlGYOaiD4CVzwBp0FRKPZfaFksSF0bsJMwcUl6aN0zDoNQnjWOWqJrr5w0iLzgMFSRZbWOGSxrwWr2cKZkrVoFq0IF0b71MOfjgeRv2jddVuXEVwETQhF2iehB2PSE9Z2lYYZH/hHu+oKXaesnSZsCs6vOXoKtJDL9tobTcvaxS8EL0xppQL3ZmMEL3ifJSVqNH3z9ZJq6AJc7+vFCorNifrab2NN8HcHHlwFgh80zN0SaAdRHn+8wpbOB5G2FhTRZ8QJeKNCzNhgj0HPKfYRl9I+p41IvZz68RZB+31TMWgk68QLTlt6OtP6b9xeu5d8NFZe/wCjXv/t
  • #39: https://play.vuejs.org/#eNp9kU9PAjEQxb9K0wtqFCJ4IgvxDxz0oAaJp16WZYBCt23a6Yoh+92ddgOSiNzaeb/XvpnZ8Qdr21UA3ucZQmlVjjAUmrFsdTucroB95ioAk57tdsxBXqCsYJRjPlZQgkZW11mH0MbSG07AQo59JjHSSn031hPOZOw1RqltQFbdlGYOaiD4CVzwBp0FRKPZfaFksSF0bsJMwcUl6aN0zDoNQnjWOWqJrr5w0iLzgMFSRZbWOGSxrwWr2cKZkrVoFq0IF0b71MOfjgeRv2jddVuXEVwETQhF2iehB2PSE9Z2lYYZH/hHu+oKXaesnSZsCs6vOXoKtJDL9tobTcvaxS8EL0xppQL3ZmMEL3ifJSVqNH3z9ZJq6AJc7+vFCorNifrab2NN8HcHHlwFgh80zN0SaAdRHn+8wpbOB5G2FhTRZ8QJeKNCzNhgj0HPKfYRl9I+p41IvZz68RZB+31TMWgk68QLTlt6OtP6b9xeu5d8NFZe/wCjXv/t
  • #40: https://play.vuejs.org/#eNrVU01P4zAQ/SuzvrArsa0QtyqgBYS0cABEe/QlTSapwfFY9qQtqvrfGTviswghbtyceW9ent+MN+rE+9GyRzVRBWPnbcl4rJ12AFNkNq6Fa4cTKIzzPQM/eDzSqlpgdT+ntVaw/NtRjVaKAcuKzRJn1LYWtRKZF5HZir4v8jP6htSKec9MDv5V1lT3O0w4Ag59ajixVqItxgP/GL7W/Gvnx9OV4WoBIvdOa3Egfk3zkdkzcrVhQ6608B/LGkMxXhzIHYrxmyUoYhWMZ4jIvZeK6TwFhg0EbGALTaAO9mR79hK5IhdZkHeOhfq7KW3EP1lxPEhmebWvOEpbY9rRXSQnS7hJ1iVz6ryxGK59chm1mkBGElZaS6vLXEtR7j/V85w+qN9FGd1EDjcBI4alBPCMcRla5AE+n17hWs7PoMy6T3F9At5iJNsnjwPttHe12H7Fy24vcm7yDmbxfM3o4tOl8i4Ic5v5WkmWZ59c/cXu4egw92m3lRRTz+4rDtqdEs4Ja6Sa6vT9ar5q+whQkF+a
  • #41: https://play.vuejs.org/#eNp9kU9PAjEQxb9K0wtqFCJ4IgvxDxz0oAaJp16WZYBCt23a6Yoh+92ddgOSiNzaeb/XvpnZ8Qdr21UA3ucZQmlVjjAUmrFsdTucroB95ioAk57tdsxBXqCsYJRjPlZQgkZW11mH0MbSG07AQo59JjHSSn031hPOZOw1RqltQFbdlGYOaiD4CVzwBp0FRKPZfaFksSF0bsJMwcUl6aN0zDoNQnjWOWqJrr5w0iLzgMFSRZbWOGSxrwWr2cKZkrVoFq0IF0b71MOfjgeRv2jddVuXEVwETQhF2iehB2PSE9Z2lYYZH/hHu+oKXaesnSZsCs6vOXoKtJDL9tobTcvaxS8EL0xppQL3ZmMEL3ifJSVqNH3z9ZJq6AJc7+vFCorNifrab2NN8HcHHlwFgh80zN0SaAdRHn+8wpbOB5G2FhTRZ8QJeKNCzNhgj0HPKfYRl9I+p41IvZz68RZB+31TMWgk68QLTlt6OtP6b9xeu5d8NFZe/wCjXv/t
  • #42: https://play.vuejs.org/#eNp9Ustu2zAQ/JUFUcB24cpo3JMhG33Eh/bQFmnQkw5h6LXEhCIJkZQdCPr3LqkqCRAlN3J3Zjkz3I59sTZrA7INyz3WVnGPu0ID5NXH3XWF8JergCAddB00yIWXLV5yz/cKa9Qe+j5fEXSgrHdXaJH7DUgf0Uo9DNQJZiKuB6LUNnhoP9TmgGpbsAl4wQbobfDeaPgslBT3BD2YcKtwvqD+ZTrmqwFC8Hz1zBJdnWik9eDQB0sVWVvTeIi+jks4cS+qHo6NqWFGicwiRRjtkpMXvreRNZ99upgtIvAYNEFI2KiHxka9E9SsTZHGAa/03l8Uuo9Tk6b5BG4J3D1oAXONp/RDSzDqkE4L2O6gi29DVG8UZsqU8xtRcV1KXQ4O33Ujvgdv6DoO6m+ADPXJVL4aEkvpsSXzjiYeZZndOaNpY9IrBROmtlJh88vGBFzBNv/fpx6tgDn9SDXfkMyxLioU9xP1O3eOtYL9btBh02LBHnueNyXSIsT2/s9PPNP5sUmrExSh32heIaURosYB9jXoA8l+hktqv6e1oKSu3f7sUbvRVBQakX3CF4yW5Nsb1p/krrN14lGurP8HkecvyA==
  • #43: https://play.vuejs.org/#eNp9Ustu2zAQ/JUFUcB24cpo3JMhG33Eh/bQFmnQkw5h6LXEhCIJkZQdCPr3LqkqCRAlN3J3Zjkz3I59sTZrA7INyz3WVnGPu0ID5NXH3XWF8JergCAddB00yIWXLV5yz/cKa9Qe+j5fEXSgrHdXaJH7DUgf0Uo9DNQJZiKuB6LUNnhoP9TmgGpbsAl4wQbobfDeaPgslBT3BD2YcKtwvqD+ZTrmqwFC8Hz1zBJdnWik9eDQB0sVWVvTeIi+jks4cS+qHo6NqWFGicwiRRjtkpMXvreRNZ99upgtIvAYNEFI2KiHxka9E9SsTZHGAa/03l8Uuo9Tk6b5BG4J3D1oAXONp/RDSzDqkE4L2O6gi29DVG8UZsqU8xtRcV1KXQ4O33Ujvgdv6DoO6m+ADPXJVL4aEkvpsSXzjiYeZZndOaNpY9IrBROmtlJh88vGBFzBNv/fpx6tgDn9SDXfkMyxLioU9xP1O3eOtYL9btBh02LBHnueNyXSIsT2/s9PPNP5sUmrExSh32heIaURosYB9jXoA8l+hktqv6e1oKSu3f7sUbvRVBQakX3CF4yW5Nsb1p/krrN14lGurP8HkecvyA==
  • #47: Vue SFC Playground https://play.vuejs.org/ Vue & Vite in StackBlitz - https://vite.new/vue Vite & Vue – e.g. in Gitpod.io – npm create vue@latest then add VS Code extension Volar https://gitpod.io/#https://github.com/lucasjellema/vue3-gitpod-starter Chrome Extension Firefox Addon Edge Extension Standalone Electron app
  • #55: https://blog.logrocket.com/complex-vue-3-state-management-pinia/
  • #56: https://blog.logrocket.com/complex-vue-3-state-management-pinia/ stackblitz.com/edit/vitejs-vite-9jwcjw?file=src%2Fcomponents%2FHelloWorld.vue
  • #57: https://blog.logrocket.com/complex-vue-3-state-management-pinia/ stackblitz.com/edit/vitejs-vite-9jwcjw?file=src%2Fcomponents%2FHelloWorld.vue
  • #58: stackblitz.com/edit/vitejs-vite-9jwcjw?file=src%2Fcomponents%2FHelloWorld.vue
  • #68: https://lucasjellema.github.io/code-cafe-vue3-people-application/