Complete Trailing Slashes Guide for Vue & Nuxt
Introduction
A trailing slash is the "/" at the end of a URL. For example:
- With trailing slash:
/about/ - Without trailing slash:
/about
While trailing slashes don't directly impact SEO rankings, they can create technical challenges:
- Duplicate Content: When both
/about and/about/ serve the same content without proper canonicalization, search engines have to choose which version to index. While Google is generally good at figuring this out, it's better to be explicit. - Crawl Budget: On large sites, having multiple URLs for the same content can waste your crawl budget.
- Analytics Accuracy: Different URL formats can split your analytics data, making it harder to track page performance.
The solution is simple: pick one format and stick to it by redirecting the other and set canonical URLs.
Nuxt SEO
Sitemap URLs will have their trailing slashes removed by default. If you want to keep them, you can set the
export default defineNuxtConfig({
site: {
// optional: only if you have trailing slashes enabled
trailingSlash: true
},
})
Trailing slashes defines whether your URLs should end with a
By default, the trailing slash is removed. Meaning any links generated by Nuxt SEO will have the trailing slash removed.
- /my-link-to-somewhere/
+ /my-link-to-somewhere
Enabling Trailing Slashes
Nuxt SEO allows you to enable global trailing slashes using site config.
This will automatically add trailing slashes to your sitemap, canonical URLs and more.
export default defineNuxtConfig({
site: {
trailingSlash: true,
}
})
Handling Internal Links
While Nuxt SEO can handle the correct trailing slashes for all of its own modules, it can't correct the behaviour of
You will need to make sure you're using the correct slashes for these.
Alternatively, you can use the
<SiteLink>
This has the exact same API as
<template>
<!-- Will be set to /about/ if trailingSlash is enabled -->
<SiteLink to="/about">
About
</SiteLink>
</template>
Props
withBase - Will add theapp.baseURL to the linkabsolute - Will render the link as an absolute path.