Vue.js: Build a Full Stack App With Firebase, Vuex & Vue Router

Chris Dixon, Web Developer & Online Teacher

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
76 Videos (6h 5m)
    • Welcome new

      2:35
    • What you will need for this course

      2:48
    • Section intro: Project setup

      0:39
    • Project setup using the Vue-CLI

      6:09
    • Header and Footer components

      4:33
    • Home page component

      7:39
    • Styling our components

      5:13
    • Creating the menu component

      8:02
    • Looping through menu items

      5:33
    • Pushing orders to an array

      4:56
    • Adding the shopping basket

      6:01
    • Making the shopping basket dynamic

      5:05
    • Shopping basket methods

      5:25
    • Structuring the admin section

      7:39
    • Listing current orders

      5:46
    • Add new pizza component

      7:50
    • Form input bindings

      6:37
    • Section outro: Project setup

      0:51
    • Section intro: Firebase database & authentication

      0:45
    • Setting up our Firebase database

      9:22
    • Adding the login component

      6:13
    • Enable Firebase authentication

      3:45
    • Signing in and out

      8:00
    • Final components

      5:57
    • Section outro: Firebase database & authentication

      0:35
    • Section intro: Vue router

      0:36
    • Router installation and setup

      3:14
    • Creating our routes

      6:22
    • Router link in more detail

      4:29
    • Binding and dynamic routes

      4:41
    • History and hash modes

      3:22
    • Catch all routes and redirecting

      2:03
    • Nested routes

      7:48
    • Nested router view

      3:48
    • Adding names to routes

      5:11
    • Router navigation methods

      5:08
    • Global navigation guards

      6:21
    • Component guards

      4:14
    • Guarding individual routes

      4:03
    • Defining scroll behavior

      8:15
    • Re-factoring our routes

      2:41
    • Named router views

      6:25
    • Section outro: Vue router

      0:37
    • Section intro: State management with Vuex

      0:51
    • What is Vuex?

      2:43
    • Installation and file structure

      4:06
    • Initial state and accessing the store

      5:40
    • Improving store access with getters

      6:24
    • Changing state with mutations

      8:33
    • What are actions?

      2:05
    • Setting the user with actions

      4:22
    • Dispatching actions

      7:57
    • Mapping getters

      5:01
    • Splitting our store into separate files

      8:17
    • Using modules

      10:30
    • Section outro: State management with Vuex

      0:49
    • Section intro: Binding to Firebase and finishing our project

      0:48
    • Binding Vuex to Firebase

      8:38
    • Sync orders with Firebase

      4:07
    • Displaying orders in the admin section

      7:36
    • Adding keys to lists

      3:58
    • Removing items from the database

      7:11
    • Hiding the admin from unauthorised users

      3:13
    • Firebase read/write rules

      4:36
    • Calculating the basket total

      4:41
    • Global currency filter

      6:14
    • Finishing touches

      6:56
    • Section outro: Binding to Firebase and finishing our project

      0:35
    • Important Update: Babel syntax dynamic import

      2:18
    • What is code splitting and lazy loading?

      4:00
    • Async components

      6:31
    • Lazy loading with the vue router

      4:59
    • Grouping components into the same chunk

      2:53
    • Lazy loading with conditional rendering

      8:50
    • Thank you

      1:40
    • Follow me on Skillshare!

      0:23