How to use PublicRuntimeConfig variables inside nuxt.config.js?

Question

In my nuxt.config.js file I create some variables which are needed in multiple parts of my application. My main objective is this:

In this example I use the about.vue page. The name and url of a link are defined in the nuxt.config file. An object is created that stores both custom name as url of about. I want to replace the standard URL of homepage.com/about to homepage.com/custom-about. I should get custom-about from the $config.ABOUT.URL. I tried both $config.ABOUT.URL as this.ABOUT.URL but both won't work. How can I pass the variable created in publicRuntimeConfig to router inside the same nuxt.config.js file?

.env

ABOUT_NAME='Custom about'
ABOUT_URL='custom-about'

nuxt.config.js

publicRuntimeConfig: {
  PAGE_TITLE: process.env.PAGE_TITLE || "Company",

  ABOUT: {
    NAME: process.env.ABOUT_NAME || "About us",
    URL: process.env.ABOUT_URL || "/about"
  },
}
...
router: {
  extendRoutes: routesIn => {
    routesIn.forEach(r => {
      if (r.path.includes("/about")) {
      r.path = r.path.replace("/about","/" + this.ABOUT.URL);
    }
  }
},

Answer 1

In my comment, there is a part with If you need this variable for a Nuxt module, but yeah, I'll edit it to basically add ... or anything at all in your nuxt.config.js file I guess.

Here, you should use this

r.path = r.path.replace("/about", "/", process.env.ABOUT_URL)