Nuxt•7mo ago

Is there a setting in Nuxt3 SSG to add a trailing slash to the end of the page URL?

I've spent a long time with the engineers on my team looking through issues and docs and can't find it, and I'm having trouble with no errors. If I add a trailing slash to a link, it disappears after reloading, and if I add it in the middleware, it disappears once and then follows. I have looked for options for Nuxt, Vue Router, and Nitro, but I can't find anything that currently works. The versions of the various libraries are as follows nuxt: ^3.12.4, vue: latest,. nuxi: ^3.12.0, node: 20.11.1 node: 20.11.1 Hosting service is AWS s3

5 Replies

kapa.ai•7mo ago

Hi @hasuto_01. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- There is a setting in Nuxt 3 to control trailing slashes: the app.trailingSlash option in your nuxt.config file. You can set it to 'append' to ensure URLs end with a trailing slash (e.g., /foo/), or 'remove' to remove them (e.g., /foo). Here’s how you would configure it:

export default defineNuxtConfig({
  app: {
    trailingSlash: 'append', // or 'remove'
  }
})

export default defineNuxtConfig({
  app: {
    trailingSlash: 'append', // or 'remove'
  }
})

This setting is designed to affect <NuxtLink>, navigateTo, and route resolution, ensuring consistency in your URLs. However, please note that, as of the information in the knowledge sources, this feature was introduced as a new enhancement and may still have some edge cases or require you to update all your internal links to match the chosen style. Also, redirecting non-slash URLs to slashed versions is not handled automatically by this config alone; you may need to implement additional middleware or server-side redirects for full enforcement, especially when hosting on platforms like AWS S3 and CloudFront, which have their own routing and redirect behaviors. For S3/CloudFront, you may also need to ensure your static hosting and Lambda@Edge functions are configured to serve and redirect URLs with trailing slashes as needed feat(nuxt): trailingSlash config & createRouteResolver util, Nuxtjs canonical URL are getting overridden on production. If you are still seeing the trailing slash disappear after reloads or redirects, it may be due to the way S3/CloudFront handles directory indexes and redirects. In that case, you should: 1. Set trailingSlash: true (or 'append') in your Nuxt config. 2. Update all your internal links to include the trailing slash. 3. Add middleware to redirect URLs without a trailing slash to the slashed version. 4. Configure S3/CloudFront to serve index.html for directory paths and handle trailing slash redirects, possibly using Lambda@Edge as described in AWS documentation. This combination should help enforce trailing slashes in your Nuxt 3 SSG project hosted on AWS S3/CloudFront. If you need an example of middleware for redirecting, see the following:

// middleware/redirect.js
const redirect = (req, res, next) => {
  const uri = req.url;
  if (!uri.endsWith('/')) {
    res.writeHead(301, { Location: uri + '/' });
    res.end();
  } else {
    next();
  }
};

export default redirect;

// middleware/redirect.js
const redirect = (req, res, next) => {
  const uri = req.url;
  if (!uri.endsWith('/')) {
    res.writeHead(301, { Location: uri + '/' });
    res.end();
  } else {
    next();
  }
};

export default redirect;

And include it in your nuxt.config under serverMiddleware Nuxtjs canonical URL are getting overridden on production. If you have followed these steps and still experience issues, it may be due to platform-specific behavior outside of Nuxt’s control. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

<@1099575634109407272> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

hasuto_01OP•7mo ago

I tried both and it made no difference. It had a trailing slash in the Nuxt2 days, but it stopped working when I moved to Nuxt3, so I don't think it has anything to do with the settings on the s3 side.

johntanzer•7mo ago

Hey. Have you checked out this issue? https://github.com/nuxt/nuxt/issues/15462#issuecomment-1406332555

GitHub

Support for unified trailing slash handling · Issue #15462 · nuxt...

Describe the feature Yes, here we go again. I'd like to propose uniform trailing slash handling - as I did for Nuxt 2 - again. But I firmly believe that the implementation can be better, less e...

hasuto_01OP•7mo ago

Thank you very much! I checked properly again and found this issue: https://github.com/nuxt/nuxt/issues/31521 This is exactly the same event as this issue, https://github.com/nuxt/nuxt/pull/31902 I have raised the nuxt version to v3.17.1, as you have solved the problem with this PR. Then another error appeared, so I'm investigating that one. The trailing slash thing is resolved! Thank you very much!

GitHub

[SSG] The trailing "/" is missing from the browser address bar link...

Environment Node Version: 20.12.2 Nuxt Version: 3.16.1 Reproduction N/A Describe the bug I'm using the SSG feature in my Nuxt project. I generate the static pages using the following commands a...

GitHub

fix(nuxt): don't redirect when route has trailing slash by kyohei-2...

🔗 Linked issue resolves #31521 📚 Description The idea with #22192 was likely to make URLs the same with or without a trailing slash, but it didn&#39;t. This is due to using isEqual with traili...

Gaming

Programming

Is there a setting in Nuxt3 SSG to add a trailing slash to the end of the page URL?

Did you find this page helpful?