Building a VueJS App

Thanks for watching!

Contact Me

Email:
     jeffrey@vuescreencasts.com

Twitter: @vuescreencasts
Text: 501-256-3078

Took a quick break

Let's do

Snackbars

Then we're done

INSERT VIDEO HERE

Building a VueJS App
Part 10

Building a VueJS App
Part 10

Building a VueJS App
Part 10

Building a VueJS App
Part 10

Building a VueJS App
Part 10

Building a VueJS App
Tentative Plan

• playedVideos on the server

• Create and assign tags

  • select box

  • has_many relationships

• Playlists

  • ordered has_many relationships

  • UI Challenges

• Cleanup

  • Modules or Pathify

Building a VueJS App
Tentative Plan

Building a VueJS App
Part 11

Building a VueJS App
Part 11

Loading video plays

Building a VueJS App
Part 11

Saving video plays

Building a VueJS App
Part 11

Review

Building a VueJS App
Part 12

Building a VueJS App
Part 12

Section 1

Displaying Current Tags
 

Building a VueJS App
Part 12

Section 2

Connecting Tags

Building a VueJS App
Part 12

Section 3

Review

Building a VueJS App
Part 14

Section 1
Read (Index)

Building a VueJS App
Part 14

Section 2
Update (Edit)

Building a VueJS App
Part 14

Section 3
Delete

Building a VueJS App
Part 14

Section 4
Create

Building a VueJS App
Part 14

Section 5
Review

Building a VueJS App
Part 15

Section 1
Our First Module

Building a VueJS App
Part 15

Section 2
All The Other Modules

(Which should take, all put together, about the same amount of time as the first)

Building a NuxtJS App
REQUIREMENTS

• Basic VueJS knowledge

• Basic VueX knowledge

• Basic Vue Router knowledge

• Watching all 8+ hours of my Building an App series

Building a NuxtJS App

• Why Nuxt?

• Installation

• Project Structure

• Pages and Routing

• Navbar + Layouts

• axios + asyncData

• Meta tags

• VueX + fetch
• Summary

Building a NuxtJS App

Section 1
Why Nuxt?

Why Nuxt?

• Server-Side Rendering (SSR)

• Automatic Code Splitting

• Easier Async Data

• Built-in popular Vue packages: VueX, Vue Router, Vue Meta

Building a NuxtJS App

Section 2
Installation

Building a NuxtJS App

Section 3
Project Structure

Building a NuxtJS App

Section 4
Pages and Routing

Building a NuxtJS App

Section 5

Navbar + Layouts

Building a NuxtJS App

Section 6

axios and asyncData

Building a NuxtJS App

Section 7

meta tags

Building a NuxtJS App

Section 8

VueX and fetch

Building a NuxtJS App

Section 9

Review

Building a NuxtJS App
REQUIREMENTS

• Basic Nuxt knowledge
  OR
  Watch my Introduction to Nuxt video
   

• Intermediate VueJS knowledge
  OR
  Watch my Building an App series

Building a NuxtJS App

• Vuetify the Navbar

• Home page

• Video Watch page

• Tags page

Building a NuxtJS App

• User-facing site

• VueX and Middleware

• Admin section

• Authentication and Authorization

Building a NuxtJS App

Section 1

Vuetify the Navbar

Building a NuxtJS App

Section 2

Home Page

Building a NuxtJS App

Section 3

Video Watch Page

Building a NuxtJS App

Section 4

Tags Page

Building a NuxtJS App

Section 5

Summary

NuxtJS + VueX
REQUIREMENTS

• Basic Nuxt knowledge
  AND
  Basic VueX Knowledge
  
  OR
  
  Watch the previous 2 videos in this series

NuxtJS + VueX

• From asyncData to VueX (naive)

• Refactor with deserializers and destructuring

• Strategy Discussion

• Preloading, Middleware, and the RSVP library

NuxtJS + VueX

Section 1

From asyncData to VueX (naive)

NuxtJS + VueX

Section 2

Refactoring with

deserializers, destructuring, etc.

NuxtJS + VueX

Section 3

Strategy Discussion

NuxtJS + VueX

Data Loading Strategies

• Load and Dump

• Preloading

• Cacheing

NuxtJS + VueX

Section 4
 

Preloading,
Middleware,
and the RSVP library

NuxtJS + VueX

Section 5
Summary

Nuxt Auth

• Using `$auth.user`

• Login and Registration forms

• Configuring and using `loginWith`

• User notifications and errors

• Auth middleware

Why Nuxt Auth?

• Everyone needs it

• Seems super hard

• And actually kinda is hard at first

Nuxt Auth

Section 1

Installation

and

using $auth.user

Nuxt Auth

Section 2

Login and Register Forms

Nuxt Auth

Section 3

Configuring and using
loginWith()

Nuxt Auth

Section 4

Error Handling

and

User Notifications

Nuxt Auth

Section 5

Auth Middleware

Nuxt Auth

Section 6

Conclusion

Deploying Nuxt (SSR)

• Choosing our strategy

• Deploying bare Nuxt app

• Connecting to the server

• Dealing with other stuff

Deploying Nuxt (SSR)

Section 1

Choosing a Strategy

Deploying Nuxt (SSR)

Section 2

Deploying a basic Nuxt app

Deploying Nuxt (SSR)

Section 3

Connecting to the API Server

Deploying Nuxt (SSR)

Section 4

Deploying the Complete App

Deploying Nuxt (SSR)

Section 5

Conclusion

Markdown +

Syntax Highlighting

• Display Markdown with marked

• MarkdownDisplay Component

• Syntax Highlighting with Highlight.js

• Live Preview in Editing

Markdown +

Syntax Highlighting

Section 1

Displaying Markdown with marked

Markdown +

Syntax Highlighting

Section 2

MarkdownDisplay Component

Markdown +

Syntax Highlighting

Section 3

Syntax Highlighting with Highlight.js

Markdown +

Syntax Highlighting

Section 4

Live Preview Editor

Markdown +

Syntax Highlighting

Section 5

Summary and Preview

VueJS Slots

• Slots vs Props

• Basic Slots

• Scoped Slots

• Named Slots

VueJS Slots

Section 1

Slots vs Props

VueJS Slots

Slots vs Props

• Complement, not replacement

• More complexity -> Slots

VueJS Slots

Section 2

Basic Slots

VueJS Slots

Section 3

Named Slots

VueJS Slots

Section 4

Scoped Slots

VueJS Slots

Conclusion

Making our VueJS App Look Nicer 

• Clarifying the Video Edit Page

• Video Preview Component

• Watch Page Improvements

• Reinstating the Played Checkmark

• Font-awesome in Nuxt

Making our VueJS App Look Nicer 

Section 1

Clarifying the Video Edit Page

Section 2

Video Preview Component

Making our VueJS App Look Nicer 

Section 3

Watch Page Improvements

Making our VueJS App Look Nicer 

Section 4

Reinstating the Played Checkmark

Making our VueJS App Look Nicer 

Section 5

Font-awesome
in Nuxt

Making our VueJS App Look Nicer 

Conclusion

Making our VueJS App Look Nicer 

Direct File Upload to S3

Securely from the Browser!

• Getting a file from the input

• Setting up S3

• Getting S3 Credentials Securely

• Uploading Files with aws-s3

• Loading indicator

• Vuetify's v-file-input

Direct File Upload to S3

Securely from the Browser!

Section 1

Getting a file from the html input

Direct File Upload to S3

Securely from the Browser!

Section 2

Setting Up S3

Direct File Upload to S3

Securely from the Browser!

Section 3

Getting S3 Credentials Securely

Direct File Upload to S3

Securely from the Browser!

Section 4

Uploading Files

with

aws-s3

Direct File Upload to S3

Securely from the Browser!

Section 5

Loading Indicator

Direct File Upload to S3

Securely from the Browser!

Section 6

Vuetify's v-file-input

Direct File Upload to S3

Securely from the Browser!

Conclusion

Vuetify's

Data Table Component

• Basic Table
• Custom Item (column) Slots
• Custom Sorting
• VideoTable Component
• Tags and Played Columns
• Expandable Rows (preview the video)
• DataTable Events
• Custom Search
• Abstracting for General Use (use in Admin page)

Vuetify's

Data Table Component

Section 1

Simple Tables

Vuetify's

Data Table Component

Section 2

Custom Item.name (column) Slots

Vuetify's

Data Table Component

Section 3

Custom Sorting

Vuetify's

Data Table Component

Section 4

VideoTable Component

Vuetify's

Data Table Component

Section 5

'Tags' and 'Played' Columns

Vuetify's

Data Table Component

Section 6

Expandable Rows

Vuetify's

Data Table Component

Section 7

DataTable Events

Vuetify's

Data Table Component

Section 8

Custom Search

Vuetify's

Data Table Component

Section 9

Abstracting for General Use

(Awesome stuff with Admin page)

Vuetify's

Data Table Component

Section 10

Review

MirageJS

Creating a mock backend in VueJS

• Why Mirage?
• Our First Mirage Endpoint
• JSONAPI: Models, Serializers, and Shorthands
• JSONAPI Relationships
• POST, PUT, and DELETE
• Authentication
• Finishing Up

MirageJS

Creating a mock backend in VueJS

Section 1

Why Mirage?

MirageJS

Creating a mock backend in VueJS

Section 2

Our First Mirage Endpoint

MirageJS

Creating a mock backend in VueJS

Section 3

JSONAPI: Models, Serializers, and Shorthands

MirageJS

Creating a mock backend in VueJS

Section 4

JSONAPI Relationships

MirageJS

Creating a mock backend in VueJS

Section 5

Put, Post, and Delete

MirageJS

Creating a mock backend in VueJS

Section 6

Authentication

MirageJS

Creating a mock backend in VueJS

Section 7

Finishing Up

MirageJS

Creating a mock backend in VueJS

Section 8

Conclusion

VueX Strict Mode

Section 1
Anti-Pattern:
Updating VueX with every keystroke

VueX Strict Mode

Section 2
Changeset Pattern, part 1

VueX Strict Mode

Section 3
Fixing a Longstanding Mutation Bug

VueX Strict Mode

Section 4
Changeset Pattern, part 2

VueX Strict Mode

Section 5
Fixing the Snackbar

VueX Strict Mode

Section 7
Conclusion

VueX Strict Mode

Section 3
Closing Snackbars

VueX Strict Mode

Interlude

Strict Mode is CANCELLED?

VueX Strict Mode

Section 4
Better Forms

by using

Changesets

VueX Strict Mode

Section 5
Fixing a Mutation Bug!

Or: how VueX Strict Mode uncovered a longstanding error

VueX Strict Mode

Section 6
Better Forms

by using

Changesets

VueX Strict Mode

Section 6
Turning off

Strict Mode

in Production

VueX Strict Mode

Section 8
Conclusion/Review

MirageJS in Nuxt

Section 1
From Installation

to

First API Endpoint

MirageJS in Nuxt

Section 1.5
A Warning About Universal Mode

MirageJS in Nuxt

Section 2
Fixing Data Discrepancies

1. Change Server
2. Change Mirage
3. Change Vue Code

Fixing Data Discrepancies

MirageJS in Nuxt

Section 3
Route Shorthands

MirageJS in Nuxt

Section 4
Mirage Relationships

(Adding Tags to Videos)

MirageJS in Nuxt

Section 5
More Mirage Relationships

(Tags Page)

MirageJS in Nuxt

Section 6
Loading Data Once

with Middleware

MirageJS in Nuxt

Section 7
CRUD for Videos, Tags, and VideoTags

MirageJS in Nuxt

Section 8
Mirage API Endpoints
for Nuxt Auth

MirageJS in Nuxt

Section 9
Mirage API Endpoints
for Nuxt Auth

MirageJS in Nuxt

Section 10
Multi-Word

Attribute Keys

MirageJS in Nuxt

Section 11
Reinstating markPlayed button

MirageJS in Nuxt

Section 12
S3 Uploads

MirageJS in Nuxt

Section 13
Deleting Tags

MirageJS in Nuxt

Section 14
Conclusion (for now)

MirageJS in Nuxt

Section 2
Hmmm

Pagination

Section 1
Pagination Bar Mockup

Advanced Components: Reusable
 

Pagination

Section 2
Pagination within Github's API

Advanced Components: Reusable
 

Pagination

Section 3
Displaying the Correct Number of Pages

Advanced Components: Reusable
 

Pagination

Section 4
Active and Disabled States

Advanced Components: Reusable
 

Pagination

Section 5
Query Params
Saving Page Number

Advanced Components: Reusable
 

Pagination

Section 6
Multiple
Query Params

Advanced Components: Reusable
 

Pagination

Section 7
Changing # of
Results Per Page

Advanced Components: Reusable
 

Pagination

Section 8
Using Pagination
with Preloaded Data

Advanced Components: Reusable
 

Pagination

Section 9
Conclusion

Advanced Components: Reusable