2

Gridsome changes the uppercase path of /Clients to the lowercase path /clients when its built.

This means that setting a router path will not work as the path is case sensitive:

this.$router.push('/Clients')

How can I avoid this? Is it webpack? Does Gridsome want to avoid using router paths?

Further Example:

Pages in development -

Filetree screenshot

Will build to a folder in the /dist directory:

Build file tree screenshot

Because the path is static and is not updated on the build, the path now does not work.

Any suggestions on how to avoid this or how to keep the path the same would be great.

Daniel_Knights
  • 7,940
  • 4
  • 21
  • 49
Wally
  • 705
  • 1
  • 9
  • 24
  • 1
    [Why you shouldn't use uppercase letters in your URL](https://stackoverflow.com/questions/13511227/url-structure-lower-case-vs-upper-case). Basically, SEO and possible bugs. – Daniel_Knights Oct 20 '20 at 10:44
  • Hi Daniel - thanks for linking that article - however in Vue the convention is to name all components / pages with a Uppercase starting letter - in Gridsome this is also seen in the "starter" projects that they provide. In Gridsome the router element seems to auto create router for any .vue file placed in the /pages dir - but on build those routes seem to be lower case, or perhaps they always are lower case..... If you have any gridsome specific input for this question it would be really aprichaited :) - W – Wally Oct 20 '20 at 14:11
  • The convention applies to components, not routes – Daniel_Knights Oct 20 '20 at 14:15
  • You can name the route `Client` and then do `router.push('Client')` – Daniel_Knights Oct 20 '20 at 14:16
  • HI Daniel - Do you know where in gridsome you can specify that the routes Path should be called Clients - in my pages I already use, this.$router.push('Clients') to route. Thanks for the help - w – Wally Oct 20 '20 at 15:04
  • 1
    Sorry Wally, looks like you can't use named routes in Gridsome. You'd have to change your links and `this.$router.push` to use `client` instead – Daniel_Knights Oct 20 '20 at 16:16
  • 1
    Hi Daniel - thanks for that, its a bit odd, i'm just guessing the work flow is not the same as in Vue - its just odd that it does work in production i.e. npm run develop but in build i.e. npm run build - the routers name is changed to lower case Thanks again for your help - I'll keep reviewing and maybe figure something out – Wally Oct 20 '20 at 16:24
  • Hello Wally, did you get any solution or workaround for this issue? – Paulo Vinícius Nov 17 '20 at 20:29
  • Hi Paulo, no not as of yet, I've instead just been using lower case, however this has led me to another internal issue when building with gridsome which is you (as far as I can see) cannot set the name: of a route - which leads to issues when wanting to pass data to a route via this.$router.push({name: X, params: {x;x}}) - I've added another question on stack overflow and to the gridsome issues page but there hasn't been any progress on either as of yet. Which either leads me to think its a flaw or by deisgn but not explained in the docs. - all the best - wally – Wally Nov 18 '20 at 10:47

0 Answers0