Using dash in the dynamic route name in Nuxt.js

Question

As you know, in order to have dynamic route in Nuxt.js, we should use Underline (_) before the dynamic name. For example the name of the file should be:

_id.vue

The problem is that I want to write something like article-name instead of id. However, the name of folder which should be:

_article-name.vue

leads to error and breaks the projext. How can I fix it?

Answer 1

Nuxt does not support dynamic route names with dashes.

The dynamic route name (i.e., article-name here) is passed to path-to-regexp (via Vue Router), which requires named parameters to consist of word characters (alphanumeric characters and the underscore).

A potential workaround is to use underscore instead of dash:

_article_name.vue

demo