1

I've generated a store with Vue-Storefront, which uses Nuxt, and in the Layout and Routing documentation page, it is recommended to use extendRoutes as such:

require("isomorphic-fetch");
import webpack from "webpack";
const platformENV = process.env.NODE_ENV !== "production" ? "http" : "https";
const config = {
// here ------------------------------
  router: {
    extendRoutes(routes, resolve) {
      routes.push({
        name: "custom",
        path: "/test",
        component: resolve(__dirname, "pages/Category.vue"),
      });
    },
  },
// here ------------------------------
  ...
};

export default config;

The problem is that the extendRoutes is never called as no console log is triggered in it, and I'm not sure how I can go around this issue. The route not being created or renamed, it routes to the 404 page. I'm linking some parts of my package.json if that can help:

 "dependencies": {
    "@nuxt/image": "0.6.0",
    "@nuxtjs/pwa": "^3.3.5",
    "@nuxtjs/sitemap": "^2.4.0",
    "@nuxtjs/style-resources": "^1.0.0",
    "@storefront-ui/vue": "^0.12.0",
    "@vue-storefront/shopify": "^1.1.2",
    "@vue-storefront/middleware": "2.5.6",
    "@vue-storefront/nuxt": "2.5.6",
    "@vue-storefront/nuxt-theme": "2.5.6",
    "cookie-universal-nuxt": "^2.1.3",
    "core-js": "^3.19.1",
    "isomorphic-fetch": "^2.2.1",
    "nuxt": "^2.13.3",
    "@nuxtjs/i18n": "^7.2.1",
    "vee-validate": "^3.2.3",
    "vue-scrollto": "^2.17.1",
    "@nuxtjs/device": "^2.1.0",
    "ipx": "0.9.1"
  },
  "devDependencies": {
    "@nuxt/types": "^2.13.3",
    "@nuxt/typescript-build": "^2.0.0",
    "@vue/test-utils": "^1.0.0-beta.27",
    "babel-jest": "^24.1.0",
    "cypress": "^9.1.0",
    "ejs": "^3.0.2",
    "jest": "^27.4.3",
    "lint-staged": "^11.1.2",
    "start-server-and-test": "^1.14.0",
    "vue-jest": "^4.0.0-0"
  }

If anyone went through the same issue, has an idea, please let me know.

Reda Herradi
  • 21
  • 4
  • You could probably remove a good amount of irrelevant code here. What is not working exactly? Could you narrow it down a bit please? – kissu Aug 06 '22 at 20:43
  • @kissu I've edited the code and removed irrelevant code to the question, my issue is with the router part of the config. The documentation shows that using extendRoutes(), would let me edit the routes, but that piece of code is never called. – Reda Herradi Aug 06 '22 at 21:22
  • Yeah, that should work great because it's similar to my other answer here: https://stackoverflow.com/a/68000764/8816585 And I remember that it worked well. Maybe try to build your app and visit the actual endpoint. It should work. Do you maybe have a [repro]? – kissu Aug 06 '22 at 21:30
  • I have tried to set up a mre here: https://github.com/r-herradi/test-project – Reda Herradi Aug 06 '22 at 21:52

1 Answers1

1

I have found an answer after trying to get rid of parts of the code like @kissu commented. The problem comes from "./modules/cms/build", in the buildModules in nuxt.config.js, this line calls the build script of the cms that's been integrated, which replaces the router.extendRoutes function and makes its own routes.

buildModules: [
    // to core
    "./modules/cms/build",
    "@nuxtjs/composition-api/module",
...

I hope this helps someone out there !

Reda Herradi
  • 21
  • 4
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Aug 10 '22 at 06:23