COLDFUSION & VUE

Building CFML-powered reactive applications

MEANWHILE…

Practical Functional Programming in ColdFusion

Shake N’Bake: Top 10 Performance Tuning Tricks to put you in First Place

Try This At Home: Building Your Own ColdFusion Swarm

MATT GIFFORD

@coldfumonkeh

consultant developer

writer

gin drinker

runner

Distrokid
WHAT IS VUE.JS?
WHAT IS VUE.JS?

A progressive framework

Allows for incremental additions to an existing application

GETTING STARTED
Vue.js Intro
VUE DEVTOOLS
Debug your application
VUE DEVTOOLS

https://github.com/vuejs/vue-devtools
GETTING STARTED
DECLARATIVE
RENDERING
Getting started
DECLARATIVE RENDERING

Render data to the DOM in a simple way

CONDITIONALS
Control your display
 LOOPS
Data iteration
DIRECTIVES
Built-in functionality
DIRECTIVES

Instantly recognisable with the v- prefix

Can take arguments (eg v-bind:title)

Can be written in shorthand

Can be dynamic
TWO-WAY BINDING
TWO-WAY BINDING
TWO-WAY BINDING
TWO-WAY BINDING
TWO-WAY BINDING

Whenever a model’s property changes, change the bound element

Whenever a bound element changes, change the model’s property

HANDY DIRECTIVE MODIFIERS
EVENT MODIFIERS

Special prefixes denoted by a dot

Order matters when writing modifiers

THE LIFECYCLE
Process and Order
 COMPUTED
PROPERTIES
Separate your logic
COMPUTED PROPERTIES
COMPUTED PROPERTIES
 WATCHERS
Keeping an eye on changes
WATCHERS
 FILTERS
Common text formatting you control
FILTERS
FILTERS
 COMPONENTS
The building blocks for your app
COMPONENTS
COMPONENTS

HEADER
COMPONENTS

HEADER
Title
Lorem issue dollar sit amet

Title
Lorem issue dollar sit amet
COMPONENTS

HEADER
Title
Lorem issue dollar sit amet

Title
Lorem issue dollar sit amet
COMPONENTS

HEADER
Title
Lorem issue dollar sit amet

Title
Lorem issue dollar sit amet
COMPONENTS

HEADER
Title
Lorem issue dollar sit amet

Title
Lorem issue dollar sit amet
COMPONENTS

HEADER
Title
Lorem issue dollar sit amet

Title
Lorem issue dollar sit amet
COMPONENTS

HEADER
Title
Lorem issue dollar sit amet

Title
Lorem issue dollar sit amet
COMPONENTS

HEADER
Title
Lorem issue dollar sit amet

Title
Lorem issue dollar sit amet
COMPONENTS

HEADER
Title
Lorem issue dollar sit amet

Title
Lorem issue dollar sit amet
COMPONENTS

HEADER
nav1 | nav2 | nav3 | nav4

Title
Lorem issue dollar sit amet

Title
Lorem issue dollar sit amet
COMPONENTS

HEADER
nav1 | nav2 | nav3 | nav4

Title
Lorem issue dollar sit amet

Title
Lorem issue dollar sit amet
COMPONENTS - CREATION
COMPONENTS - CREATION
COMPONENT COMMUNICATION
COMPONENTS - PROPS
COMPONENTS - PROPS
COMPONENTS - PROPS
COMPONENTS - PROPS
COMPONENT COMMUNICATION
COMPONENT COMMUNICATION
COMPONENT COMMUNICATION
COMPONENT COMMUNICATION
CREATING AN APP
Vue CLI
CREATING AN APP

npm install -g @vue/cli

CREATING AN APP
.VUE FILES

Single-file components

Clearly structured with: template, script and style blocks

TEMPLATE
TEMPLATE

SCRIPT
TEMPLATE

SCRIPT

STYLE
CREATING AN APP

npm install bootstrap-vue bootstrap

CREATING AN APP - USING PLUGINS
 ROUTING
Singe Page Application
ROUTING

npm install vue-router

ROUTING
ROUTING
ROUTING
ROUTING
ROUTING
USING AN API
Fetching external data
USING AN API - AXIOS

Supports the Promise API

Transform request and response data

Automatic JSON data transformations

Support for XSRF

USING AN API - AXIOS
USING AN API - AXIOS

npm install axios

USING AN API - AXIOS
VUEX STORES
State Management
VUEX

npm install vuex

VUEX
VUEX
VUEX

Helps to deal with shared state management

Ideal for long term productivity and larger applications

No “one-way” to structure the store

More concepts, boilerplate code and architectural structure

VUEX
VUEX
VUEX
VUEX
VUEX
VUEX
CREATING A STORE
STATE
GETTERS
ACTIONS
MUTATION
VUEX - UPDATING OUR APP
VUEX - UPDATING OUR APP
SO, WHY VUEX?

Keep a single source of truth for data

Available for all components to access

Avoid having to send props and emit data between every component
VUEX

https://vuex.vuejs.org/
COLDBOX ELIXIR
Bundle your application assets
COLDBOX ELIXIR
COLDBOX ELIXIR

git clone https://github.com/coldbox-templates/elixir-vuejs

COLDBOX ELIXIR
WHERE NEXT?
Additional Vue.js Tools
VUEJS.ORG
NUXTJS.ORG
COLDBOX-ELIXIR.ORTUSBOOKS.COM
MUCH MORE

Transitions & Animations

Mixins & Custom Directives

Unit Testing

and much more…

WHY VUE.JS?
Simplicity
SO, WHY VUE.JS?

VERY easy to bind data to HTML elements

Lightweight and performant

Highly extensible
 COLDFUSION & VUE
Building CFML-powered reactive applications