Index

A

• Animate.css
  • about / Animate.css
  • using / Using Animate.css
• animations / Animations
• anti-pattern
  • communication / Communication – Anti-pattern
  • communication, modifying / What can we change about this to make it better?
  • children mutating props / Children mutating props – Anti-pattern
  • children mutating props, working / What should we do instead?
  • property arrays, mutating / Mutating property arrays
  • data, using as object / Using data as an object - Anti-Pattern
  • components, naming / Naming components – Anti-pattern
• application level / State Management Pattern (SMP)
• asyncData / asyncData

B

• bindings
  • about / Bindings
  • secondary properties, adding / Adding secondary properties
  • style bindings / Style bindings

C

• category component
  • creating, in Nuxt / Categories
• category detail page, Nuxt / Category detail
• client connection
  • about / Client connections
  • Vue, setting up / Setting up Vue and Socket.io
  • Socket.io, setting up / Setting up Vue and Socket.io
• Command Line Interface (CLI) / Prerequisites
• component communication
  • about / Component communication
  • property values, configuring / Configuring property values
  • custom events / Custom events
  • events values, sending / Sending event values
  • event values, sending / Sending event values
• component level / State Management Pattern (SMP)
• Component Navigation Guards
  • about / Component Navigation Guards
  • beforeRouteUpdate / beforeRouteUpdate
  • beforeRouteEnter / beforeRouteEnter
  • beforeRouteLeave / beforeRouteLeave
• components
  • communicating / Components
  • naming / Naming components – Anti-pattern
  • template expressions / Template expressions
  • Presentational components / Pattern – Container/Presentational components
  • Container components / Pattern – Container/Presentational components
  • prop, validation / Prop validation
  • reactivity / Understanding reactivity
• computed properties / Computed properties
• connection status
  • determining / Determining connection status
  • connection status bar, creating / Creating a connection status bar
• Continuous Integration (CI)
  • about / Continuous Integration (CI)
  • unit tests / Unit tests
  • Git repository, creating / Creating a Git repository
  • Travis CI, connecting to / Connecting to Travis CI
  • automatic deployment, to Firebase / Automatic deployment to Firebase
• CSS Animations
  • about / CSS animations
  • animate.css / Animate.css
• custom layouts
  • creating, in Nuxt project / Layouts

D

• data properties / Data properties
• Document Object Model (DOM) / Summary, DOM
• DOM elements
  • displaying conditionally / Conditionally showing DOM elements
  • v-show / v-show
  • v-if / v-if
  • v-else / v-else
  • v-else-if / v-else-if
• DOM events
  • handling, with v-on / DOM events and v-on
• dynamic routes
  • route props / Route props

E

• elements
  • rendering / Rendering elements
  • attributes / Attributes
  • components / Components and props
  • props / Components and props
  • JSX / JSX
• error page / Error page
• Event Bus / Event Bus

F

• filters
  • about / Filters
  • locally registered filters / Locally registered filters
  • globally registered filters / Globally registered filters
• Firebase
  • deploying / Firebase deployment
  • reference / Firebase deployment
• form validation
  • about / Form validation
  • Vuelidate / What is Vuelidate?
  • Vuelidate, using / Using Vuelidate
• functional components / Render/functional components

G

• GET / HTTP GET
• globally registered filters / Globally registered filters
• global router hooks
  • beforeEach / beforeEach
  • beforeResolve / beforeResolve
  • afterEach / afterEach
  • resolution stack / Resolution stack

H

• Homebrew
  • reference / Installing Node via Homebrew
• HTTP
  • about / HTTP
  • JSON server, installing / Installing JSON server
  • GET / HTTP GET
  • POST / HTTP POST
  • PUT / HTTP PUT
  • DELETE / HTTP DELETE

J

• JavaScript
  • this, working / How 'this' works within JavaScript
• JavaScript modules
  • about / JavaScript modules
  • Vue-loader / Vue-loader
• JSON server
  • installing / Installing JSON server

L

• lazy loading routes / Lazy loading routes
• lifecycle hooks
  • about / Lifecycle hooks, Lifecycle hooks
  • created() / Lifecycle hooks
  • mounted() / Lifecycle hooks
  • destroyed() / Lifecycle hooks
  • URL / Lifecycle hooks
• locally registered filters / Locally registered filters

M

• message list / Message list
• Mock REST API / The Mock REST API
• modules / Modules and scalability
• moment
  • URL / Filters

N

• navigation bar / Navigation bar
• ngrok
  • reference / Testing on a device
• Node
  • installation link / Windows
  • installing, via Homebrew / Installing Node via Homebrew
• Node Version Manager (NVM) / Installing Node via Homebrew
• Nuxt
  • about / Nuxt
  • project, creating / Creating a Nuxt project
  • directory structure / Directory structure
  • configuration / Nuxt configuration
  • navigation / Navigation
  • routes, navigating / Navigating between routes
  • custom layouts, creating / Layouts
  • Mock REST API / The Mock REST API
  • asyncData / asyncData
  • categories, creating / Categories
  • category detail page / Category detail
  • error page / Error page
  • plugins / Plugins
  • recipes, adding / Adding recipes
  • transitions, adding / Transitions
  • building, for production / Building for production
  • building, in static mode / Static
  • building, in SPA mode / SPA mode

P

• plugins, Nuxt / Plugins
• prerequisites
  • Windows / Windows
  • Mac / Mac
  • Editor / Editor
  • Browser / Browser
  • Vue CLI / Vue CLI
  • React / React
  • Angular / Angular
  • mobile development / Mobile development
  • Server-Side Rendering (SSR) / Server-Side Rendering (SSR)
  • web framework selection / Conclusion
• programmatic navigation
  • about / Programmatic navigation
  • router.replace / router.replace
  • router.go / router.go
• Progressive Web Applications (PWAs)
  • about / Progressive Web Applications (PWAs)
  • manifest / Web application manifest
  • testing, on device / Testing on a device
• proxying
  • about / Proxying
  • this, working within JavaScript / How 'this' works within JavaScript
  • this, handling / How Vue handles 'this'

R

• React
  • reference / React
• reactivity
  • about / Understanding reactivity
  • URL / Understanding reactivity
• real-time chat application
  • creating, with Node / Real-time chat application with Node and Socket.io
  • creating, with Socket.io / Real-time chat application with Node and Socket.io
  • Socket.io / What is Socket.io?
  • server, setting up / Server setup
  • client connections / Client connections
  • connection status, determining / Determining connection status
  • navigation bar / Navigation bar
  • message list / Message list
  • messages, adding to list / Adding messages to the list
  • server-side events, with Socket.io / Server-side events with Socket.io
  • nodemon / Nodemon
• render components
  • about / Render/functional components
  • elements, rendering / Rendering elements
• router
  • using / Using the router
  • routes, creating / Creating routes
  • dynamic routes / Dynamic routes
  • Component Navigation Guards / Component Navigation Guards
  • global router hooks / Global router hooks
  • programmatic navigation / Programmatic navigation
  • lazy loading routes / Lazy loading routes
• RxJS
  • and Vue / RxJS and Vue
  • about / What is RxJS?
  • integrating, with Vue / Integrating with Vue

S

• scalability / Modules and scalability
• Server-Side Rendering (SSR) / Server-Side Rendering (SSR), Nuxt
• service worker
  • about / Service worker
  • reference / Service worker
• Single File Components (SFC) / Your first Vue component
• Single Page Application (SPA) / Single Page Applications, Building for production
• slots
  • about / Slots
  • defaults / Defaults
  • named slots / Named slots
• Socket.io
  • used, for creating real-time chat application / Real-time chat application with Node and Socket.io
  • about / What is Socket.io?
  • setting up / Setting up Vue and Socket.io
• SPA project
  • about / An SPA project
  • router, enabling / Enabling the router
  • routes, defining / Defining routes
  • UserList route, creating / Creating the UserList route
  • data, obtaining from API / Getting data from an API
  • detail page, creating / Creating a detail page
  • child routes / Child routes

T

• testing / Why testing?
• this
  • working, within JavaScript / How 'this' works within JavaScript
  • handling / How Vue handles 'this'
• transitions
  • about / Transitions
  • states / Transition states
  • adding, in Nuxt / Transitions
• Travis CI
  • connecting to / Connecting to Travis CI
  • reference / Connecting to Travis CI
  • configuring / Configuring Travis
  • automatic deployment, to Firebase / Automatic deployment to Firebase
• TypeScript
  • and Vue / TypeScript and Vue
  • lifecycle hooks / Lifecycle hooks
  • properties / Properties
  • computed / Computed

U

• unit testing
  • about / Unit testing
  • vue-test-utils, setting up / Setting up vue-test-utils
  • TodoList, creating / Creating a TodoList
  • tests, writing / Writing tests
  • vue, options / Vue options
  • features, adding / Adding new features
  • click events / Click events
  • events, testing / Testing events

V

• v-for
  • iteration / Iteration with v-for
• v-model directive / Model
• v-on
  • used, for handling DOM events / DOM events and v-on
  • key modifiers / Key modifiers
  • event modifiers / Event modifiers
• Vetur / Vetur
• Virtual DOM / Vue.js and the Virtual DOM, Virtual DOM
• Visual Studio Code
  • reference / Editor
• Visual Studio Code extensions
  • about / Visual Studio Code extensions
  • Vetur / Vetur
  • Vue 2 Snippets / Vue 2 Snippets
• VNode (Virtual Node) / Rendering elements
• VNodes (Virtual DOM Nodes) / Rendering elements
• Vue
  • setting up / Setting up Vue and Socket.io
• Vue.js
  • comparing / How Vue.js compares
  • reference / How Vue.js compares
  • about / Vue.js and the Virtual DOM
• Vue 2 Snippets / Vue 2 Snippets
• Vue 2.x
  • reference / How Vue.js compares
• Vue Command Line Interface (CLI)
  • about / Vue CLI
  • JavaScript modules / JavaScript modules
  • modules, loading without Webpack / Loading modules without Webpack
• Vue component
  • about / Your first Vue component
  • components, registering globally / Registering components globally
  • scoped styles / Scoped styles
  • components, registering locally / Registering a component locally
• Vue devtools
  • installing / Installing the Vue devtools
  • download link / Installing the Vue devtools
  • about / Vuex and Vue devtools
• VueJS devtools / VueJS devtools
• Vuelidate
  • about / Form validation
  • using / Using Vuelidate
  • form errors, displaying / Displaying form errors
  • password validation / Password validation
  • form submission / Form submission
• Vuex
  • about / What is Vuex?, Vuex and Vue devtools
  • State Management Pattern (SMP) / State Management Pattern (SMP)
  • URL / State Management Pattern (SMP)
  • state / Thinking about state
  • using / Using Vuex
  • store, creating / Creating a new store
  • action types, defining / Defining action types
  • actions / Actions
  • mutations / Mutations
  • getters / Getters
  • elements, combining / Combining elements
  • payloads / Payloads

W

• W3C Custom Elements specification
  • URL / Registering components globally
• Wallaby.js
  • using / Using Wallaby.js for a better testing experience
• watched properties / Watched properties
• web app manifest
  • reference / Web application manifest