Sorry, your browser is not supported
To have the best experience using Skillshare, we recommend that you use one of these supported browsers.

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
75 Videos (6h 4m)
    • Welcome new

      2:51
    • 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:14
    • 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:56

About This Class

If you have a little experience of building websites using Javascript or frameworks such as Vue.js, this course is the next step in your learning journey! 

During this course, you will build a full stack project to push your skills even further and discover how to integrate state management, front end routing, databases, authentication and code splitting.

============================​

If you do not have any experience of Vue.js or a similar framework, I have a beginner friendly course also available:

Vue.js 2 Academy: Learn Vue Step by Step

============================

You will build a pizza restaurant project from scratch which allows users to place an order from a menu section. These orders are then pushed to Firebase for persistent data storage. 

We also create a admin section, where authorised users can add or remove menu items and manage any orders placed. these orders are also pushed to Firebase.

All of our pages are managed by the Vue Router and you will learn all about creating routes, navigation methods, nav guards, binding routes and different router modes.

This project also uses Vuex for state management. This will give our app a single store for all of our state, this will be also kept in sync with Firebase so we always have easy, local access to all of our data.

So if you are looking for a course to teach you how to build a full, feature packed project from scratch, then enrol today!  

22

Students

--

Projects

0

Reviews (0)

Chris Dixon

Web Developer & Online Teacher

Hello, My name is Chris and I am a web developer and online teacher. I am passionate about what I do and about teaching others. I have started various online and offline businesses.

Whatever your reason for learning to build websites you have made an excellent career choice.

My personal motivation was to become my own boss and have more freedom and flexibility in my life. I also enjoy the technical challenge it provides and the way it constantly evolves. I built my first website...

See full profile