In this slide deck I show you how you can easily and quickly create quite rich web applications with Vue 3 – without having to study complex concepts or understand many technical details. I have only recently learned how to work with Vue 3 myself and now is the best time for me to share my learning experience (and my enthusiasm) with you. I know what I found essential to understand and what most got me excited in these early steps (what was a little bit hard to grasp). I believe that I can present my steps and guide you to experience the same fun and have a similarly gratifying experience. I am not an expert in this subject – I have barely learned how to walk and that is why I can help you with these first steps with Vue. In this deck, I do not explain how Vue works. I do not really know that. I will show you how to work with it and how to create web applications that are functional, appealing, fast and responsive. The approach I am taking is straightforward: • I will tell you a little bit about web development, browsers and reactive frameworks • I will show the hello world of Vue applications • I will explain about components and nesting, events, data binding and reactive behavior and demonstrate these concepts • I will introduce Vue UI Component libraries – and with no effort at all we will launch our application to the next level – with rich components to explore, manipulate, visualize data collections • We will publish the web application from our development environment to where the whole world could see it – using GitHub Pages • As bonus topic – we discuss state management At the end of this session you will be able to quickly create a simple yet rich web application with Vue 3. You have a starting point to further evolve your skills with the many online resources I am convinced that you will enjoy your newfound powers and the simplicity and power of Vue 3. Note: a tutorial accompanies this slide deck - see https://github.com/lucasjellema/code-face-vue3-intro-reactiive-webapps-aug2023/blob/main/README.md

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

13. VUE COMPONENT
13

14. VUE COMPONENTS
14

15. VUE COMPONENTS
15

16. REUSE COMPONENTS
16

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

29. DINNER
30

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

34. REACTIVE
35
reactive
data
element
The value: 42
Repeat: is really is 42
42

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

38. DEMO REACTIVE TOGGLE
39

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

45. STACKBLITZ
47

46. GITPOD
48

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

70. www.conclusion.nl

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