Preview of Nested Routes with Vue.js 3 and Firebase

In this tutorial, we will explore how to create nested routes in a Vue.js 3 application using Firebase for data storage. Nested routes are a powerful feature in Vue.js that allows you to organize your application into hierarchical structures, making it easy to manage complex navigation and data relationships.

Before we begin, make sure you have Node.js installed on your system. You can download it from the official Node.js website (https://nodejs.org/).

To get started, let’s create a new Vue.js project using the Vue CLI. Open your terminal and run the following command:

vue create nested-routes-demo

Follow the prompts to set up your project. Once the project is created, navigate to the project directory by running:

cd nested-routes-demo

Next, install Vue Router and Firebase by running the following commands:

npm install vue-router@4 firebase

Now that we have all the necessary dependencies installed, let’s set up our nested routes. Open the src/router/index.js file and update it as follows:

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
import Services from '../views/Services.vue'
import Contact from '../views/Contact.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  },
  {
    path: '/services',
    name: 'Services',
    component: Services,
    children: [
      {
        path: 'web-development',
        name: 'Web Development',
        component: WebDevelopment
      },
      {
        path: 'app-development',
        name: 'App Development',
        component: AppDevelopment
      }
    ]
  },
  {
    path: '/contact',
    name: 'Contact',
    component: Contact
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

In this setup, we have defined four routes: Home, About, Services, and Contact. The Services route has two nested routes: Web Development and App Development. Each route corresponds to a component that will be displayed when the user navigates to that route.

Next, let’s create the WebDevelopment.vue and AppDevelopment.vue components in the src/views directory. These components will represent the content for our nested routes.

Now that we have defined our routes and components, let’s update the App.vue file to use the router. Replace the contents of App.vue with the following code:

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  margin-top: 60px;
}
</style>

Now, when you run your Vue.js application by running npm run serve, you should be able to navigate to the nested routes by visiting /services/web-development and /services/app-development.

To integrate Firebase into our application, we need to set up Firebase in your project. Go to the Firebase console (https://console.firebase.google.com/) and create a new project. Follow the instructions to set up Firebase in your project.

Next, install the Firebase SDK by running the following command:

npm install firebase

Create a new file named firebase.js in the src directory and initialize Firebase in this file:

import { initializeApp } from 'firebase/app'

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
}

const app = initializeApp(firebaseConfig)

export default app

Note: Replace the placeholder values with your own Firebase project configuration.

Now you can use Firebase in your Vue components by importing the initialized Firebase app. For example, you can fetch data from Firebase Firestore and display it in your components.

Congratulations! You have successfully set up nested routes in a Vue.js 3 application using Firebase for data storage. Feel free to explore more features and functionalities of Vue Router and Firebase to build powerful web applications.