generating dynamic routes with nuxt and nuxt content

Question

I am generating dynamic links using nuxt content, which worked fine till I updated my nuxt version and nuxt content version.

I'm getting the following error when running npm run build. This code that is throwing an error is in my nuxt.config.js.

error:

  ├─ async routes() {                                                                                                                           nitro 11:11:07 AM
      const { $content } = require('@nuxt/content');
      const files = await $content({ deep: true }).only(['path']).fetch();

      return files.map((file) => {
        let filePath = file.path;
        if (filePath === '/pages/index' || filePath.includes('/site')) {
          filePath = '/';
        } else if (filePath.includes('/pages')) {
          filePath = filePath.toString().split('/pages')[1].split('/index')[0];
        }
        return filePath;
      });
    } (undefinedms) (TypeError: route.split is not a function)

code:

generate: {
    fallback: true,
    // Enables router to generate dynamic links (https://content.nuxtjs.org/advanced/)
    async routes() {
      const { $content } = require('@nuxt/content')
      const files = await $content({ deep: true }).only(['path']).fetch()

      return files.map((file) => {
        let filePath = file.path
        if (filePath === '/pages/index' || filePath.includes('/site')) {
          filePath = '/'
        } else if (filePath.includes('/pages')) {
          filePath = filePath.toString().split('/pages')[1].split('/index')[0]
        }
        return filePath
      })
    }
},

If I change my code to what it recommends in the docs, I still get the same error..

const { $content } = require('@nuxt/content')
const files = await $content({ deep: true }).only(['path']).fetch()

return files.map(file => file.path === '/pages/index' ? '/' : file.path)

nuxt 3.6.1 nuxt-content 2.7.0

Henrique Van Klaveren · Answer 1 · 2023-06-28T18:21:45.627

I hope I understood your question, because I experienced some thing like this a few days ago.. My solution for my case was the nuxt.hook pages:extend.

In my case I created a ClassRoute to organize my code better, and split in small peaces.

1- Create a new folder called extends in your project root folder;

2- Create a new file ExtendsPages.ts

// ~/extends/ExtendsPages.ts
import { RoutesApp } from "./crud/RoutesApp";
import { RoutesCrud } from "./crud/RoutesCrud";

export class ExtendsPages {
  static handle(nuxt: any) {
    RoutesCrud.handle(nuxt);
    RoutesApp.handle(nuxt);
    ... // others routes
  }
}

3- Create separated classes for each context as you need. Here is my Crud page injected in Nuxt.

// ~/extends/crud/CrudRoutes.ts
import { resolve } from "path";

export class RoutesCrud {
  static handle(nuxt: any) {
    const basePath = nuxt.options.runtimeConfig.CORE_PATH_BASE;
    // You can add many times the nuxt.hook("pages:extend" for each route/component as you need.
    nuxt.hook("pages:extend", (pages: Array<any>) => {
      pages.push({
        name: "CrudForm",
        path: "/logiccus/crud/:path?",
        file: resolve(basePath, "components/crud/Crud.vue"),
        meta: {
          setPageLayout: "app",
        },
      });
    });
  }
}

Here I have anoter route for my pages:

// ~/extends/pages/RoutesPages.ts
export class RoutesPages {
  static handle(nuxt: any) {
    const basePath = nuxt.options.runtimeConfig.PATH_BASE;
    nuxt.hook( "pages:extend", ( pages: Array<any> ) => {
      pages.push({
        name: "AppPage",
        path: "/app/:path?",
        file: resolve("../../components/page/PageView.vue" ),
        addRouteMiddleware: "app",
      });
    });
  }

4- Register your RoutesCrud in nuxt.config.

// nuxt.config.ts
import { ExtendsPages } from "./extends/pages/ExtendsPages";
export default defineNuxtConfig({
...
  modules: [
    (options, nuxt) => {
      ExtendsPages.handle(nuxt);
    },
  ]
...
})

Done, now you have imported all your routes in Nuxt dynamically Just adapt your old routes file to generate multiples nuxt.hook("pages:extend") by map for exemple.

I hope it was useful for you.

generating dynamic routes with nuxt and nuxt content

1 Answers1