Nuxt Dynamic Routing on Firebase

Question

My Nuxt.js App has this structure:

/pages/index.vue
/pages/_slug/index.vue

When user gets /{any_page}, it will use the path to build the page content:

/pages/_slug/index.vue

<template>
  <div>
    {{slug}}
  </div>
</template>

<script>
import fetch from 'isomorphic-fetch';
export default {
  async asyncData({ params }) {
    return { slug: params.slug } 
  }
}
</script>

This works perfectly when running the Nuxt App directly via yarn dev.

When I try to run this using firebase functions:

$ firebase serve --only functions,hosting

The static routes work perfectly, but the dynamic routes always render the default / page, instead of executing the dynamic one. How do I fix this?

Are you trying to deploy yout Nuxt project as static content to Firebase Hosting? — Jesús Fuentes

jlipstate jlipstate · Accepted Answer · 2020-01-13T01:57:28

If using nuxt generate, then the explanation below should work. If using nuxt build, look at this repo, it is a template i wrote for nuxt + firebase as ssr.

Generate says it skips over dynamic routes, unless you explicitly specify them, hence 404 errors. In your Nuxt config file, you want to specify those routes. Here is an example of fetching from the database during generation. Note that in my example below, the doc id is the slug for the page.

nuxt.config.js

generate: {
    async routes() {
      const { db } = require('./services/fireInit');
      const qs = await db.collection('recipes').get();
      return qs.docs.map(x => `/recipes/${x.id}`);
    }
  },

The downside to this approach is as you add new items via a CMS, you will need to rebuild/deploy your site each time if you want to be able to use these new links without a 404. CMS without redeploy does work if you navigate to new content 'organically'...404 only occurs on a page refresh or on jumping directly to the page from a hyperlink.

Nuxt Dynamic Routing on Firebase

1 Answers