Building a Single Page Application with VueJS

Building a Single Page
Application (SPA) with
VueJS
@danpastori

I’m passionate about traveling ✈

Drinking coﬀee ☕

Being in nature 🍁

And of course…

And of course…
Everything to do with
making apps!!!

I’ve been developing for 12 years

I’ve been developing for 12 years
8 years ago, Jay Rogers and I started
521 Dimensions
https://521dimensions.com
@521dimensions

We build 100% custom web and
mobile applications and specialize in API
Driven Development (SPA + API)

For our applications, we use a variety of
tools and languages….

For our applications, we use a variety of
tools and languages….
But our preferred front end framework is
VueJS!

Before we dive in, I wanted
to make 2 points:

to make 2 points:
1. This will be an open talk!

Meaning I’ll share my
experiences, show tutorials,
and discuss the wonders of
VueJS

But…. It’s also a time for you
all to pipe up with questions,
concerns, comments
whatever you think is
beneﬁcial to the group and
understanding!

to make 2 points:
2. Like all developers, I have
an opinion

That doesn’t mean I’m right
and anyone using Angular,
React, Stimulus, etc. is
wrong..

I just ❤ Vue and my goal is
show you how awesome it is
even as an alternative.. And
that SPAs are awesome too!

Which is probably
controversial.. but we will get
there 🥰

First oﬀ, how many of you
have used Vue? ✋

How many have built an
SPA? 🛁

How many of you have used
ReactJS, AngularJS, or
something similar? ✋

Let’s do a quick comparison
between Vue + React & Vue +
Angular

Let’s do a quick comparison
between Vue + React & Vue +
Angular
I’ll do my best being out of the ReactJS and Angular
communities for some time
https://vuejs.org/v2/guide/comparison.html

Angular is Backed by Google
(VueJS creator Evan You worked on Angular when he was
at Google)

Angular is built heavily on TypeScript, VueJS it’s
optional
https://buttercms.com/blog/comparing-angular-vs-vue
at Google)

at Google)
optional
Angular has a much more opinionated
architecture where VueJS is ﬂexible

at Google)
Angular has a much larger footprint (500+ KB vs
80KB)
https://www.themexpert.com/blog/angular-vs-react-vs-vue
optional

at Google)
Angular has a much larger footprint (500+ KB vs
80KB)
https://www.themexpert.com/blog/angular-vs-react-vs-vue
optional
Angular is MVVM (Model-View-ViewModel)

React is Backed by Facebook
React uses JSX. Vue allows you to use Web
Components ❤ or JSX

Web Components are AAAAHHHMAZING!!
<template>
<router-link :to="route" class="no-underline">
<div class="mt-2 mb-2 left-nav-link text-center h-16 flex flex-col items-center justify-center
cursor-pointer"
v-bind:class="{ 'bg-blue-500 border-l-2 border-white border-solid' : currentRoute ==
route }">
<slot name="image"></slot>
<span class="text-xs mt-2 block text-center"
v-bind:class="{
'text-gray-400': currentRoute != route,
'text-white' : currentRoute == route
}">
<slot name="name"></slot>
</span>
</div>
</router-link>
</template>
<script>
export default {
props: ['route'],
data(){
return {
currentRoute: this.$router.currentRoute.name
}
},
}
</script>

Oﬃcial packages (state management and router)
for React are 3rd Party

Oﬃcial packages (state management and router)
for React are 3rd Party
React has React Native. VueJS has ports like
NativeScript

So why I love Vue!
1. The documentation is incredible

So why I love Vue!
1. The documentation is incredible
* Third party docs are amazing as well!

So why I love Vue!
2. Ability to use Web Components

So why I love Vue!
All Javscript, Template HTML, and
CSS are in one re-usable ﬁle

So why I love Vue!
All Javscript, Template HTML, and
CSS are in one re-usable ﬁle
With slots, it’s even more reusable!

So why I love Vue!
3. State Management and Router are
NOT 3rd Party!

So why I love Vue!
3. State Management and Router are
NOT 3rd Party!
That’s right! Vue-Router and Vuex are
oﬃcial.

So why I love Vue!
4. Not maintained by a large
corporation

So why I love Vue!
4. Not maintained by a large
corporation
This may sound weird, but I love how
Vue is run and managed.

So why I love Vue!
5. Excellent tools

So why I love Vue!
5. Excellent tools
•Chrome Debugger
•Server Side Rendering
•Vue CLI

https://insights.stackoverﬂow.com/survey/2019#most-loved-
dreaded-and-wanted
Other Devs Love Vue Too!

Let’s talk a little bit about the
core modules of VueJS!

First, we have the core library
https://vuejs.org

This is where all of the core
features are packed such as:
• Reactivity
• Housing of local data
• Template Rendering
• Registering of Components

You also get features like:
• Mixins
• Transitions
• Form Input Bindings
• Computed Properties

Don’t worry, we will see all of
this in action! 🔥

Next, we have the vue-router
library
https://router.vuejs.org/

Vue Router takes care of
• HTML 5 History API Management
• Navigating without full page reloading
• Nested Routing

With Vue Router you also get
features like:
• Named Routes
• Route Meta Data
• Redirecting
• Hooks that can be used for guarding and
authorization.

Essentially, Vue-Router is
what makes Single Page
Applications Possible!
🏄

Last but not least, we have the
Vuex library
https://vuex.vuejs.org/

Vuex is Vue’s version of Redux
for React. It’s a “state
management pattern +
library” inspired by Redux and
Flux

For the React Devs in the
room, you may recognize Dan
Abramov’s quote.
“Flux libraries are like glasses: you’ll know when you
need them.”

For the React Devs in the
room, you may recognize Dan
Abramov’s quote.
“Flux libraries are like glasses: you’ll know when you
need them.”
That’s by far the best deﬁnition of when you should use a ﬂux library.

Vuex handles the state for
your large scale SPAs.
State is made up of modules
which in turn have:
• Localized State
• Getters
• Mutations
• Actions

The way I look at it. If you keep passing
properties and you need the same data
on your page more than 5 times, might
be time to look at Vuex.

Let’s mix it all together and
make some VueJS Magic!
-

Real quick, has anyone built an
SPA?

Let’s spend 1 minute deﬁning what an
SPA is.

A Single Page Application Means:
•The page doesn’t make a full refresh when
navigating

navigating
•We rely on the HTML 5 History API for navigation

navigating
•Usually communicates to some sort of API to
retrieve data

navigating
•Usually communicates to some sort of API to
retrieve data
•You make an initial load of assets and then load
the rest on demand

What we are building
•Simple Contact Book
•We will have 3 Routes
•Contacts
•Contact
•Add Contact
•We will have Vuex for state, vue-router for nav
and Vue for display.
📒

So I did a little set up… Just to save
time ⏱

1. I set up a quick project using the Vue
CLI (Yup, they have that too). Which
installed Vue, Vuex, and Vue Router.

2. Next I installed Axios.js for HTTP
requests.
https://github.com/axios/axios

3. I added two directories:
• ./src/api
•./src/state

4. I added the contacts module and
imported it into the store.

5. I added the contacts API and
imported it into the contacts module.
This allows us to keep our API routes
separate and easy to edit.

6. I also set up a simple PHP API we
will hit. It has the following routes:
• GET /api/v1/contacts
• GET /api/v1/contacts/{id}
• POST /api/v1/contacts
• PUT /api/v1/contacts/{id}

This does not have authentication, you
will see the route in this presentation. It
will be accessible on the network.
Please be nice ☺

Vue Life Cycle Diagram
https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram

https://vuex.vuejs.org/
Vuex Flow

If you need any help you can ﬁnd me at:
@danpastori
https://serversideup.net
https://github.com/521dimensions

Building a Single Page Application with VueJS

More Related Content

What's hot

Similar to Building a Single Page Application with VueJS

Recently uploaded

Building a Single Page Application with VueJS