Vue.js Jump-start with Nuxt.js & Firebase

Set up a nuxt.js project by exploring the pages folder structure, editing the home page, and running the dev server on a custom port, while configuring eslint and code extensions.

Lay the foundation for the Vue.js app by downloading a complete template, copying assets into the root, and configuring the project to load dynamic pages via a shared layout.

Learn to set up a Vuex store, define state, actions, mutations, and getters, and wire it to the user interface using dispatch and getters.

Learn to handle user form events with a submit button, manage loading and errors through Vuex store mutations, actions, and watchers, and dynamically bind user interface states to API calls.

Retrieve and list user groups from the Firebase database in real time, updating the user groups page by dispatching a get groups action and processing snapshot data.

Set up the signup page with an email and password form, implement the on sign up method and button, and handle errors; reuse boilerplate code from the user groups page.

Learn to implement a complete login flow with email and password using firebase, including sign-up data handling, admin role checks, and dynamic redirection to the home page.

Turn the menu into a dynamic, login-aware navigation that displays the authenticated user's name in a dropdown, with sign in, sign out, and role-based content using Firebase.

Explore updating a user profile in a Vue.js app with Nuxt.js and Firebase: trigger profile actions, use update profile API, and sync name and email to database and UI.

Learn how to upload a product image by selecting a file, using the File API, and uploading to Firebase storage, then update the product data and categories.

Discover how to list products in a vue.js app with nuxt.js and firebase by initializing a products array, fetching data, and displaying items with images and prices.

Build a dynamic product catalog on the home page by fetching 50 products from the catalog store with Firebase, rendered by a reusable product box.

Demonstrate search and sort in a Vue.js app with Nuxt.js and Firebase, implementing category filtering, dynamic category options, and data flow through actions and mutations.

Learn to manage a shopping cart in a Vue.js Nuxt.js app by updating product quantities from the details page using refs and mutations to add or increase items without duplication.

Create and manage a dynamic shopping cart in a Vue.js app: list items, adjust quantities with plus/minus, apply currency formatting, compute totals, and handle empty cart before checkout.

Implement the checkout page by saving order data to the database via an api job, and display a conditional thank-you message while the update completes.