vuejs vue-router isn't working with Firebase hosting

Question

I'm having a issue while using vue router. When I click on the Navbar to change between views/pages, the website works fine, but when I try to go directly to a specific page through the domain/url, I get an error through Firebase (where the website is hosted) saying that the file does not exist in the root index.html.

Here's the code of the index.js file from routes:

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";
import Courses from "../views/Courses.vue";
import LandingPageTechSession from "../views/LandingPageTechSession.vue";
import VueMeta from "vue-meta";
Vue.use(VueMeta);

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/muddy-match",
    name: "MuddyMatch",
    component: MuddyMatch,
  },
  {
    path: "/courses",
    name: "Courses",
    component: Courses,
  },
  {
    path: "/techsession",
    name: "TechSession",
    component: LandingPageTechSession,
  },
];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes,
});

export default router;

Here's the code of the App.vue:

  <div id="app">
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.2.0/css/all.css"
      integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ"
      crossorigin="anonymous"
    />
    <navbar></navbar>
    <router-view />
    <bottom></bottom>
  </div>
</template>

<script>
import Navbar from "./components/Navbar.vue";
import Bottom from "./components/Footer.vue";

export default {
  name: "App",
  components: {
    Navbar,
    Bottom,
  },
};

And the Navbar item. (The courses route is with router-link but it still gives the same error):

<template>
  <b-container fluid>
    <b-navbar toggleable="sm" id="navbar" type="light">
      <b-navbar-brand :to="{ name: 'Home' }">
        <img id="logo" src="../assets/S2Plogo.png" alt="S2Plogo" />
      </b-navbar-brand>

      <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>

      <b-collapse id="nav-collapse" class="collapse" is-nav>
        <b-navbar-nav align="end" class=" ml-auto">
          <b-nav-item size="sm" class="navbar-item"
            ><router-link class="navbar-item" :to="{ path: 'Courses' }">{{
              $t("nav.courses")
            }}</router-link>
          </b-nav-item>
          <b-nav-item
            size="sm"
            class="navbar-item"
            :to="{ name: 'TechSession' }"
            >{{ $t("nav.techsessions") }}</b-nav-item
          >
          <b-nav-item
            size="sm"
            class="navbar-item"
            href="https://teespring.com/"
            target="_blank"
            >{{ $t("nav.merchandise") }}</b-nav-item
          >
          <b-nav-item size="sm" class="navbar-item" href="/#contact-us">{{
            $t("nav.contactus")
          }}</b-nav-item>
          <b-nav-item
            size="sm"
            v-on:click="switchLocale()"
            class="navbar-item"
            >{{ displayLocale }}</b-nav-item
          >
        </b-navbar-nav>
      </b-collapse>
    </b-navbar>
  </b-container>
</template>

Thank you advance guys!

Answer 1

The answer about this has nothing to do with Vue Router or Vue actually, but with Firebase.

If you want to be able to navigate through url directly, just add the "rewrites" array on your firebase.json:

{
  "hosting": {
    "public": "dist",
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  },
}

You shouldn't have any issue now. Happy coding!