Nuxt Dynamic Routing On Firebase
Solution 1:
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
- Event Listener For Input's Value Change Through Changing With .val() In Jquery?
- Selecting A Default Value In An R Plotly Plot Using A Selectize Box Via Crosstalk In R, Using Static Html Not Shiny
- How To Highlight The Syntax Error Using The Lint In Codemirror Lint And Remove The Codemirror To Make Normal Textarea
generate: {
asyncroutes() {
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.
Post a Comment for "Nuxt Dynamic Routing On Firebase"