Vue JS 3 & Firebase - The Full Guide [2022]

Install node.js and npm, install the Vue CLI, and create a Vue 3 project. Start a local server at localhost:8080 using Visual Studio Code with the Vetur extension.

Discover the folder structure of a Vue.js 3 project, including components, assets, and public folders. Learn how a single-file view uses template, script, and style.

Initialize the voters project template by loading the file from resources, then install required packages, run the local server, and inspect the page to understand data interactions and structure.

Create a Styles folder with variables.css, install Bulma, and import variables and Bulma into the main app file to establish a consistent design system for your Vue JS 3 project.

Break a complex vue js 3 app into reusable components—nav bar, hero, and posts with pagination—and mount the view, using a prefixed component naming convention for clarity.

Create and integrate a hero component in a Vue 3 and Firebase project by extracting templates, importing the hero into the view, and applying scoped styling to the hero section.

Learn to build a reusable list and a pagination component in Vue 3 by constructing an exchange list, importing and wiring components, and applying scoped styles for a clean UI.

Define the data function in a Vue component and return an object with a brand name and menu items, then interpolate them in the template with double curly brackets.

Explore how to render a list with Vue.js 3 using the v-for directive, iterating five menu items, binding item text and link with v-bind, and using a unique key.

Learn to pass data from parent to child components in Vue using props, bind title and items with v-bind, and use defaults or required rules to keep components reusable.

Learn to pass exchange data via props and render an exchanges list in Vue 3, creating an exchanges array with id, type, title, description, price, image, country, and city.

Display exchange data dynamically by iterating an exchanges list in a responsive 12-column grid that adapts to mobile, tablet, and desktop, binding exchange.image and exchange.title with a unique key.

Learn to loop through the exchanges data structure and display each exchange's tag and value dynamically. Then click a talk to filter and reveal related exchanges.

Install and configure Font Awesome in a Vue 3 app by adding the Font Awesome packages, importing icons, and registering them for use in components.

Learn to integrate Font Awesome, locate and import a star icon from the solid set, and style it with color, size, and a centered circular container using flexbox.

Create a pages folder and add home, about, login, and register views; implement routing to display the correct page based on the URL.

Configure Vue router with web history to render home, about, log in, and register pages based on the URL, using a router plugin to manage navigation.

Learn to implement page reusability in Vue by building a common view that renders page-specific content based on the URL path, while sharing header, menu, and pagination components across pages.

Learn to adjust the navbar in a Vue app by using global injected values, the current route path, and conditional class binding with v-bind and a ternary operator.

Explore seamless navigation in Vue 3 by replacing anchor elements with router-link to avoid full page reloads, enabling fluid page transitions and focus styling adjustments on active links.

Explore core Vue concepts by building a simple counter to demonstrate reactive data, binding, and event handling with directives like click, and implementing methods to update state.

Explore computed properties in Vue JS 3, learn to derive values like exchange list length and a count threshold, and see how reactivity updates the view automatically as data changes.

Explore how Vue 3's ref creates reactive bindings by wrapping values in an object with a value property, and compare copying by value versus by reference to UI updates.

Introduce Vuex for centralised state management, showing how to separate data management into a store, dispatch actions, mutations, and share state across components.

Discover how Vuex state management works, dispatching actions from the view and exposing exchanges through the store for the home component.

Dispatch actions to fetch exchanges in a Vue.js app with Firebase, simulating data locally in state. Use created and mounted lifecycle functions to trigger get exchanges on page load.

Refactor the store by introducing mutations to separate getting exchanges and setting exchanges, update the state with a payload via commit after a one-second delay, and improve modularity and testability.

Demonstrates async data retrieval by simulating a fetch with promises and a timeout, showing how to implement get exchanges and resolve data for use with Firebase data.

Discover how to modularize a Vuex store by creating dedicated modules like exchanges, users, and opportunities, and access each module's state from components.

Learn to prevent action name conflicts across Vuex modules by enabling namespaced actions and prefixing dispatch calls with the module name, such as exchange/getExchanges.

Learn to set up Firebase for web apps, initialize Firestore database and authentication, install Firebase via npm, configure project settings, and explore plan options and test mode rules.

Create and populate a Firestore collection of exchanges by defining documents with fields like type, title, description, price, image, country, city, and tax, using unique document IDs to fetch data.

Learn to fetch data from Firestore by querying a collection or collection group, map document snapshots to data(), and include document IDs for display in a Vue.js app.

Learn to implement a login and register page with authentication in a Vue.js and Firebase app. Build email and password inputs, wire up forms, and display validation errors.

Explore implementing two-way data binding in Vue.js using v-model to bind email and password to a form object, and create a login method that processes the form data.

Build a register page in Vue 3 with two-way data binding, adding email, username, password, and repeat password inputs, and wire a sign up action using a register method.

Create a user module in a Vue 3 and Firebase project, implement a register action to handle email and password form data, and dispatch it to register users with Firebase.

Enable Firebase authentication with email and password for your app and implement create user with email and password. Handle success and errors using user credentials in the register flow.

Demonstrates a register processing flow with a dedicated state, mutations and actions, setting a processing flag and error messages, and displaying them with a disabled sign up button.

Explore how watchers in Vue 3 react to data changes, compare them with computed properties, and use them to monitor password and error messages for reactive alerts.

Learn to map Vuex state in Vue.js 3 using the mapState helper to access user register error and processing. Bind these to a sign-up button for cleaner, readable state access.

Take advantage of the mapState helper to map user module data, such as register status and processing flags, simplifying access to user state and error handling.

Explore the composition API in Vue js 3 to create reusable logic with the register function for shared authentication across components, using setup and use register.

Create a useAuth compositional function to expose and share auth state (error and processing) across pages, refactor to use computed properties, and wire it into register and login flows.

Watch and react to error messages and processing state in a Vue 3 and Firebase signup flow, then redirect to the home page after a successful registration.

Clean up code by removing unused register, simplify function composition, and restore straightforward store dispatch to validate the login and signup flow in a Vue 3 and Firebase setup.

Learn to add toast notifications to a Vue 3 and Firebase app by installing a toast plugin, registering it, and dispatching success and error messages for signup flows.

Link the authentication UID to a Firestore user document in the users collection, storing username, avatar, credit, and exchanges, using setDoc to write the profile.

Learn to listen for Firebase authentication state changes with onAuthStateChanged, update the app user state, and display the user avatar on login or show no user on logout.

Learn to fetch a user profile from the database using the Firebase authentication UID by accessing the users collection, retrieving the document snapshot, and logging the profile data.

Merge Firebase authentication data into the user profile in a Vue.js and Firebase app, adding id and email, and manage updates with state mutations and dispatch.

Rename the registration state to separate processing and error, refactor mutations, and prepare the login flow with Firebase authentication and computed properties.

Learn how to implement Vuex getters to react to data changes, determine authentication by evaluating state.data with boolean logic, and access getters in components such as the navigation bar.

Move the get user flow into the composition api by exposing a computed user from the store. Display the user name safely in the ui using a safe access operator.

Display the signed-in user's email in the navigation bar of a Vue.js app by binding Firebase user data and using an authentication check with conditional rendering.