This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Repository problems

These problems occurred while renovating this repository. View logs.

• WARN: Using npm packages for Renovate presets is now deprecated. Please migrate to repository-based presets instead.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update all non-major dependencies (bootstrap, bootstrap-vue, chokidar, jest, standard-version)
• chore(deps): update commitlint monorepo to v18 (major) (@commitlint/cli, @commitlint/config-conventional)
• chore(deps): update devdependency @nuxtjs/eslint-config to v12
• chore(deps): update devdependency eslint to v8
• chore(deps): update devdependency husky to v9
• chore(deps): update devdependency jest to v29
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

I'm using nuxt with element-ui directly from the nuxt-create
added the router-extras module to my nuxt config:

modules: [
		"@nuxtjs/axios",
		"@nuxtjs/pwa",
		"@nuxtjs/router-extras"
		[
			"nuxt-i18n",
			{
				//i18n stuff
			}
		]
	],

When I run yarn dev, I get FATAL The 'request' argument must be string. Received type undefined and ✖ Nuxt Fatal Error. TypeError [ERR_INVALID_ARG_TYPE]: The 'request' argument must be string. Received type undefined

I've only done this so far, did I mess up something or it's a bug?

I'm running nuxt 2.7.1

First I want to thank you for this module. It helps tremendously for our project organisation, because we have several hundred pages divided into several teams. The ability to change the path of each page and aliases outside the file hierarchy helps us keep our sanity.

However I did not understand this module initially, probably because the name is "extra" and that does not immediately ring the bell of what it is and how it is useful.

Perhaps you want to rename the module to nuxt-router-permalinks or something similar? That will make the function of assigning a "permalink" to a page more clear, like how we normally use the term in Wordpress or other CMS.

So that when generating a static site for different locales, we can change the url the page.

Example syntax:

<router>
 {
    path () {
        if (this.$store.state.locale === "en") {
           return "/about"
        }
        if (this.$store.state.locale === "es") {
           return "/acerca"
        }
    }
 }
</router>

If the API responses the pageURL as a part of the JSON, how can we use that to create the page path with this API's data ?
Is it possible to do something like this below ??

    ...
  </div>
</template>

<router>
 {
    path: page.pageURL,  // Somehow ??
 }
</router>

<script>
export default {
  name: 'Page',
  async asyncData ({ params, $axios, payload }) {
    if (payload) return { page: payload }
    const page = await $axios.$get(`http://api.mydomain.gr/pages/${params.page}`)
    return { page }
  },
  ...

I'm migrating a Vue CLI app to Nuxt.js and all my router level components are now page components on Nuxt.js.

The problem I'm having is that all router level components accept props based on the route params. Like what's explained here: https://router.vuejs.org/guide/essentials/passing-props.html#boolean-mode

Is there a way to quickly enable this behaviour in Nuxt.js using this module?
I tried installing and adding it to the buildModules key, but I was still getting the Missing required prop error on my page component.

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: Cannot find preset's package (@nuxtjs)

As described in the title, after editing any <router> instance inside a page, I need to re-run the whole application in order to see the changes.

I'm working on a project with a weird requirement: the gallery of projects is titled "index" and the slug needs to be /index. But obviously there's a index.vue file in the /pages directory that corresponds to the / route.

So I'm trying to find a solution where I can maybe rename the index.vue file to home.vue or something or where I can create a projects.vue file and have the slug /index map over to said projects.vue file.

Hi 👋 It looks like this module hasn't been updated for Nuxt 3. In an effort to improve the developer experience of modules, I've updated the module to clarify that it only supports Nuxt 2.

If Nuxt 3 support is added it will be moved to the https://github.com/nuxt-modules organisation.

Alternatives:

• Nuxt core: definePageMeta

@farnabaz Is Nuxt 3 support something you have planned? If not, perhaps we can archive this module?

Please let us know and thanks for your work!

Hi !
I was wondering if we can somehow push to a component that does have this config

<router>
 {
    path: '/new-order/add-beneficiaries',
    alias: [
      '/new-order/suspend-beneficiaries',
    ]
 }
</router>

with something like this.$router.push({ name: 'new-order-suspend-beneficiaries' })

Not sure if I quite get the docs here but the Vue tools are not showing it in the router tab.

Having <router>...</router> inside pages/foo/bar/_.vue causes error when running nuxt generate

Repo showcasing issue with minimal files: https://github.com/sqram/router-extended-example

Does anyone know what might be causing this error?

output

18:53:01 ✔ Nuxt files generated
webpackbar 18:53:02 ℹ Compiling Server
webpackbar 18:53:02 ℹ Compiling Client
webpackbar 18:53:02 ✔ Server: Compiled with some errors in 548.58ms

webpackbarfriendly-errors  18:53:0318:53:03  ✔ ERROR  Client: Compiled with some errors in 917.00ms
 Failed to compile with 1 errors


friendly-errors friendly-errors18:53:03 18:53:03  ERROR  Module parse failed: Invalid regular expression flag (9:7)
 in ./pages/v1/admin/index.vue?vue&type=custom&index=0&blockType=router

You may need an appropriate loader to handle this file type.
| 
| 
> path: /v1/admin
| name: dashboard
| 
friendly-errors 18:53:03 
 @ ./pages/v1/admin/index.vue?vue&type=custom&index=0&blockType=router 1:0-190 1:206-209 1:211-398 1:211-398
 @ ./pages/v1/admin/index.vue
 @ ./.nuxt/router.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&name=client&path=/__webpack_hmr/client ./.nuxt/client.js
friendly-errors 18:53:03 

index.vue

<template lang="html">
    <div class="">
      DASHBOARD

    </div>
</template>

<router>
  path: /v1/admin
  name: dashboard
</router>

<script>
export default {}
</script>

<style lang="css">
</style>

nuxt.config.js

{
  ...,
  /*
  ** Nuxt.js modules
  */
  modules: [
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios',
    // Doc: https://github.com/nuxt-community/redirect-module
    '@nuxtjs/redirect-module',
    // Doc: https://github.com/nuxt-community/auth-module
    '@nuxtjs/auth',
     // Doc: https://github.com/nuxt-community/router-extras-module
    '@nuxtjs/router-extras',
  ],
  ...
}

I assume I goofed something simple up since it would seem that the module either isn't loading properly, or it's broken, of which the former seems most likely.

Thanks in advance!

Does this module work with Nuxt3, too?
I can't get it to work...

how i can access props in asyncData?

Currently, if one wants to use named views in nuxt, it is required to alter the router config within the nuxt.config.js file.

As this module allows the user to generally bypass the need to directly modify the router property for common use-cases, I think it would be awesome, if it would be possible to add named components within the <router> tag.

There are multiple things to consider:

• Name and usage of the main component
• Names and discovery of any named components
• Chunk names

I think it could be reasonably resolved with the following API if the component resolution path is handled properly:

{
  namedViews: {
    currentComponentName: 'string', // 'default' by default
    views: {
       top: '~/components/Top.vue'
    },
    chunkNames: {
      top: 'components/Top'
    }
  }
}

Thank you very much for a very convenient library!

Hi. in my project IDs are UUID hash, so I defined related regex for :id dynamic parameter in path. something like that:

<router lang="js">
  {
    path: '/foo/:id([0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12})'
  }
</router>

but my problem is that I don't want repeat this regex in pages path everytime. instead want define the regex once in a const and then import it wherever I need. How could this be possible?

Thanks

Does this work well with the nuxt il8n module?

Run CircleCI on PRs

routerNativeAlias is still useful option even native aliases exists

vue-router alias only support aliases with equal number or parameters.
Which doesn't cover all cases

Eg. I have one page with optional filters, defined by $route params
page is matched againsts multiple routes

/:customer/explore/keywords
/:customer/explore/campaigns/:campaign/keywords
/:customer/explore/campaigns/:campaign/ad-groups/:adGroup/keywords

this is not easily possible with default nuxt router. Also aliases don't help here.
But router-extras-module with aliases routerNativeAlias=false works perfectly in this case.
(other options is declare routes manually, but it's pain i want to avoid)

Recently I was update Nuxt from 2.4.5 to 2.5.1, but it failed, since I use this package.

Here the full of stack trace..

ReferenceError: meta is not defined
  at ModuleContainer.addModule (node_modules/@nuxt/core/dist/core.js:174:28)
  at promise.then (node_modules/@nuxt/utils/dist/utils.js:1724:43)
  at process._tickCallback (internal/process/next_tick.js:68:7)
  at Function.Module.runMain (internal/modules/cjs/loader.js:744:11)
  at startup (internal/bootstrap/node.js:285:19)
  at bootstrapNodeJSCore (internal/bootstrap/node.js:739:3)

Wants to update nuxt router extras to beta.0, but it's not available yet on npm. Any solution?

Hello!
I'm trying to reuse an existing route simply redefining it's nesting path.
So this is what I have done:

In my existing page that responds to the path /path1/:id1/path2/:id2:

<router>
  {
    alias: [
      '/path3/:id1/path4/:id2',
    ]
  }
</router>

Compiling it, I can see that the alias is associated in the existing path.. but calling the alias page I get an error 404 (existing page works well).

I'm using also nuxt-i18n module that always prepends the lang code to the url path.

Where I'm wrong? Thank you

because of /<router([^>]*)>([\S\s.]*?)<\/router>/, also work with <router-link>
so routerContentMatch get incorrect content

example

<template>
  <div>
    <router-link to="path">
      some-path-name
    </router-link>  
  </div>
</template>
<router>
  meta:
    name: foo
</router>

notice: <router([^>]*)> match <router-link> ,or may be <router-view>

well,yes i can use nuxt-link instead of router-link,to avoid this bug

but i think should support native vue-router component, right?

I guess it should be localRoutes 😄
https://github.com/nuxt-community/router-extras-module/blob/master/lib/extras.js#L11

Is it possible to define path inside router in Yaml something like this:
path: {{ my-path }}
where my-path is vue variable

Hi. I'm getting an error which is in subject during build after adding @nuxtjs/router-extras to buildModules.

Logs - 2020-02-12T19_04_24_306Z-debug.log

Have already tried to remove package-lock.json and reinstalled node modules multiple times. Any help will be much appreciated, thanks in advance!

Now you pass the cloned alias to end of the array, after the unknown dynamic nested route.

In this case the cloned alias never reached.

Please insert the Clone alias, before unknown dynamic nested route.

@nuxt/router-extras/lib/extras.js

function invalidateRoute (file) {
  const routes = localRoutes.filter(route => route.component === file)
  console.log(localRoutes[0].component) // => print like "D:\\hyp-test\\nuxt-test\\pages\\Home.vue"
  console.log(file) // =>  print like "D:\hyp-test\nuxt-test\pages\Home.vue"
  /* istanbul ignore next */
  if (!routes.length) {
    return false
  }

  const extras = extractExtrasFromRoute(routes[0], false)

  return extras._needUpdate
}

// Should need
const routes = localRoutes.filter(route => normalize(route.component) === normalize(file))

When i set path for page and use $router.resolve(), href just give me only path and remove all params

My router define

<router>
  {
    path: '/sd/:id'
  }
</router>

My code to view info of route

console.log(this.$router.resolve({name: 'product-detail-id', params: {id: 1111}}));

And console result

href: "/sd"
location:
    name: "product-detail-id"
    params:
        id: 1111

anyone help me!!!

Thanks you very much.

Right now I can

<router>
  {
    name: 'my customized name'
  }
</router>

Wonder if it is easy for me to inject name from data, e.g.

<router>
  {
    name: this.mySpecialName
  }
</router>

<script>
export default {
  data() {
    return {
      mySpecialName: 'my customized name'
    };
  }
}
</script>

and potentially mount mySpecialName by an API call?

Please modifiy the order:

from:

function mapObjectAliases (route, aliases) {
  return aliases.map(alias => Object.assign({}, route, {
    ...pick(alias, NUXT_VALID_EXTRAS),
    path: alias.path,
    name: `${route.name}${alias.path}`
  }))
}

to:

function mapObjectAliases (route, aliases) {
  return aliases.map(alias => Object.assign({}, route, {
    name: `${route.name}${alias.path}`,
    ...pick(alias, NUXT_VALID_EXTRAS),
    path: alias.path
  }))
}

I want to redirect to a "default child" – instead of renaming to index.vue like usual (super large project, so it's important to keep a good filename).

When going to /sub/ it should be redirected to /sub/abc/, but it does not.
What am I doing wrong?

This appears super simple but doesn't work.

- sub.vue
- sub/abc.vue

sub.vue

<template>
  You are in: sub

  <nuxt-child/>
</template>

<router>
  {
    redirect: '/sub/abc'
  }
</router>

Hi @farnabaz

Could it be nice to also support JSON for the <router> block?

I think here we can use a parse method that check if the first char is { and the last one } to parse it as JSON, otherwise fallback to YAML: https://github.com/nuxt-community/router-extras-module/blob/master/lib/extras.js#L88

I have a preference for JSON since most of JavaScript developers knows the syntax and lower the learning curve of this module.

Ideally, supporting JS will be a bonus:

<router>
{
  name: 'my-name'
}
</router>

I believe using a package like gray-matter for it would be a perfect fit.

Example of supporting JavaScript: https://github.com/jonschlinkert/gray-matter/blob/HEAD/examples/javascript.js

Say I have a page example.vue with the following <router> property:

<router>
  alias:
  - path: '/event/:id'
  - path: '/:username/:eventName/:eventCount'
</router>

My generated router.js looks like:

{
    path: '/example',
    component: _4e18dbd1,
    name: 'example',
},
{
    path: '/event/:id',
    component: _4e18dbd1,
    name: 'example/event/:id',
},
{
    path: '/:username/:eventName/:eventCount',
    component: _4e18dbd1,
    name: 'example/:username/:eventName/:eventCount',
},

Is it possible to remove the /example route altogether? Or is the expected solution to this to create an example/event/_id.vue file with the router logic placed in there?

I have two pages for the mobile version and for the desktop, and there is also a mixin with logic for these pages. Can I define routes in this mixin and then use this data in <router></router>?

i delete .nuxt node_modules package-lock same error i have no idea i also added it to transpile

ATAL  SyntaxError: Unexpected identifier                            16:51:25

  at parse (node_modules/gray-matter/lib/engines.js:48:13)
  at Object.parse (node_modules/gray-matter/lib/engines.js:46:16)
  at module.exports (node_modules/gray-matter/lib/parse.js:12:17)
  at parseMatter (node_modules/gray-matter/index.js:109:17)
  at matter (node_modules/gray-matter/index.js:50:10)
  at extractExtrasFromRoute (node_modules/@nuxtjs/router-extras/lib/extras.js:88:20)
  at async extendRoutes (node_modules/@nuxtjs/router-extras/lib/extras.js:19:20)
  at async Nuxt.callHook (node_modules/hable/lib/hookable.js:50:7)
  at async Builder.resolveRoutes (node_modules/@nuxt/builder/dist/builder.js:5801:5)
  at async Promise.all (index 1)
  at async Builder.generateRoutesAndFiles (node_modules/@nuxt/builder/dist/builder.js:5662:5)
  at async Builder.build (node_modules/@nuxt/builder/dist/builder.js:5585:5)
  at async Object._startDev (node_modules/@nuxt/cli/dist/cli-dev.js:84:5)
  at async Object.startDev (node_modules/@nuxt/cli/dist/cli-dev.js:48:20)
  at async Object.run (node_modules/@nuxt/cli/dist/cli-dev.js:43:5)
  at async NuxtCommand.run (node_modules/@nuxt/cli/dist/cli-command.js:2567:7)


   ╭─────────────────────────────────────────────────────╮
   │                                                     │
   │   ✖ Nuxt Fatal Error                                │
   │                                                     │
   │   SyntaxError: SyntaxError: Unexpected identifier   │
   │                                                     │

node version 12.5.0
nuxt 2.9.2
Macos

thanks

It seems does not handle the nested routes

when routes has children, does not inject the router-extras

Is it possible to define

<router>
  {
    name: 'my unique customized name',
    displayName: 'My Display Name'
  }
</router>

as by using name I cannot have duplicated names? Imaging that I have multiple pages name "settings" for various different proposes, when I am generating a navigation bar I have no need to specify them (as what setting it belongs to can be found from the other part of the navigation bar). However, if I call all of them "settings" I'll get an error:

 WARN  [vue-router] Duplicate named routes definition: { name: "Settings", path: "/path/to/some/settings" }

and potentially I may confuse nuxt in <nuxt-link> block if I use name.

Thanks!

I've been trying to setup eslint to analyse my code, but I don't know how.

ESLint doesn't work in router block.