Routing module

Configuration

Import the module into your project by using the named import.

import { routing } from "@xerius/codey-nuxt-utils";

New applications need to comply to the new application URL structure. In order to make this easier for developers within Xerius, the routing module of this package can be used. It provides functions to easily set this up.

First configure how the routing for the application should be:

routing.configureRouting({
  base: {
    DEV: "/dev-tool",
    TEST: "/test-tool",
    ACC: "/acc-tool",
    PROD: "/tool",
  },
  app: {
    "nl-be": "/persoonlijkheidstest",
    "fr-be": "/test-de-personalite",
  },
  // will be used by the axios plugin
  bff: {
    DEV: "https://web-d-we-sample.azurewebsites.net",
    TEST: "https://web-t-we-sample.azurewebsites.net",
    ACC: "https://web-a-we-sample.azurewebsites.net",
    PROD: "https://web-we-sample.azurewebsites.net",
  },
  // will be used to load assets
  cdn: {
    DEV: 'https://static-d-we-sample.azureedge.net/',
    TEST: 'https://static-t-we-sample.azureedge.net/',
    ACC: 'https://static-a-we-sample.azureedge.net',
    PROD: 'https://static-we-sample.azureedge.net/'
  }
  env: process.env.NUXT_ENV_STAGE,
});

Now we can use the addBasePathToRoutes function to add the prefix to all routes in the application. When your environment is something other than LOCAL, this function will add the correct prefix (e.g. /dev-tool/persoonlijkheidstest). This prefix will make sure that your route works on the deploy environments.

// nuxt.config.js
modules: [
    '@nuxtjs/axios',
    [
      'nuxt-i18n',
      {
        strategy: 'prefix',
        detectBrowserLanguage: false,
        parsePages: false,
        locales: [
          { code: 'fr-be', iso: 'fr-BE', file: 'fr-BE.json' },
          { code: 'nl-be', iso: 'nl-BE', file: 'nl-BE.json' },
        ],
        defaultLocale: 'nl-be',
        lazy: true,
        langDir: 'translations/',
        pages: routing.addBasePathToRoutes({
          index: {
            'nl-be': '/',
            'fr-be': '/'
          }
          test: {
            'nl-be': '/test',
            'fr-be': '/tester',
          },
          another: {
            'nl-be': '/andere',
            'fr-be': '/autre',
          },
        }),
      },
    ],
  ],

The publicPath also needs to change in orde to accommodate the new structure:

//nuxt.config.js
build: {
  publicPath: routing.getCDNLocationForEnv(),
},

API

Name	Type	Required	Default	Values	Description
base	object	yes	null	{DEV: "", TEST: "", ACC: "", PROD: ""}	Sets the base prefix for each environment
bff	object	yes	null	{DEV: "", TEST: "", ACC: "", PROD: ""}	Sets the bff location for each environment
cdn	object	yes	null	{DEV: "", TEST: "", ACC: "", PROD: ""}	Sets the cdn location for each environment
app	object	yes	null	{"nl-be": "", "fr-be": "", "en": ""}	Sets the application prefix for each environment, not all languages are required
env	string	no	LOCAL	DEV, TEST, ACC or PROD	Set the current environment for which the routes need to be built