---
title: "Trailing Slashes in Nuxt · Nuxt SEO"
canonical_url: "https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering/trailing-slashes"
last_updated: "2026-07-16T12:00:00.000Z"
meta:
  author: "Harlan Wilton"
  description: "Learn when to enable trailing slashes, how to configure NuxtLink, and the one-line Nuxt SEO setup."
  "og:description": "Learn when to enable trailing slashes, how to configure NuxtLink, and the one-line Nuxt SEO setup."
  "og:title": "Trailing Slashes in Nuxt · Nuxt SEO"
---

Nuxt SEO on GitHub

# **Trailing Slashes in Nuxt**

Learn when to enable trailing slashes, how to configure NuxtLink, and the one-line Nuxt SEO setup.

[Harlan Wilton](https://x.com/harlan-zw)5 mins read Published **Nov 6, 2024** Updated **Jul 16, 2026**

**What you'll learn**

- Use trailing slashes for static file servers, legacy URL migrations, or CMS conventions
- Configure NuxtLink globally with `**experimental.defaults.nuxtLink.trailingSlash**`
- Nuxt SEO handles sitemaps, canonicals, and OG URLs with one config: `**site.trailingSlash: true**`

A trailing slash is the `**/**` at the end of a URL. `**/about/**` has one, `**/about**` doesn't. Both can serve identical content, and that's the problem.

nuxt.config.ts

```ts
export default defineNuxtConfig({
  site: {
    trailingSlash: true // handles everything if using Nuxt SEO
  }
})
```

## Why Enable Trailing Slashes

Most Nuxt sites don't need trailing slashes. But there are cases where you'll want them:

- Static file servers such as Apache, Nginx, and S3 treat trailing slashes as directories, serving `**/about/**` as `**/about/index.html**`. Skip the slash and some of them return 404s or need extra config
- If you're migrating from WordPress, Rails, or another legacy CMS that used trailing slashes, matching the existing format avoids mass redirects
- Some headless CMSs, like Contentful, Sanity, or Storyblok, generate paths with trailing slashes by default, so matching their format keeps URLs predictable
- Team convention: some developers use the trailing slash to visually mark a URL as a section

If none of these apply, stick with Nuxt's default: no trailing slashes.

## Configuring NuxtLink

NuxtLink has [**~~built-in trailing slash support~~**](https://nuxt.com/docs/api/components/nuxt-link#overwriting-defaults). Set it globally or per-link.

### Global Configuration

Apply trailing slashes to all internal links:

nuxt.config.ts

```ts
export default defineNuxtConfig({
  experimental: {
    defaults: {
      nuxtLink: {
        trailingSlash: 'append' // or 'remove'
      }
    }
  }
})
```

Every `**<NuxtLink to="/about">**` now renders as `**/about/**`.

### Per-Link Override

Override the global setting on specific links:

```vue
<template>
  <!-- Forces trailing slash regardless of global config -->
  <NuxtLink to="/api/docs" trailing-slash="append">
    API Docs
  </NuxtLink>

  <!-- Removes trailing slash regardless of global config -->
  <NuxtLink to="/blog" trailing-slash="remove">
    Blog
  </NuxtLink>
</template>
```

Use this for external integrations or API routes that require a specific format.

## SEO Configuration

Trailing slashes become an SEO problem when both `**/about**` and `**/about/**` exist. Search engines see two pages with identical content, splitting your ranking signals.

You need three things:

1. Consistent internal links
2. Correct [**~~canonical URLs~~**](https://nuxtseo.com/learn-seo/nuxt/controlling-crawlers/canonical-urls)
3. [**~~Redirects~~**](https://nuxtseo.com/learn-seo/nuxt/controlling-crawlers/redirects) for the wrong format

### Manual Setup

Without Nuxt SEO, configure each piece separately:

nuxt.config.ts

```ts
export default defineNuxtConfig({
  // 1. NuxtLink trailing slashes
  experimental: {
    defaults: {
      nuxtLink: {
        trailingSlash: 'append'
      }
    }
  },
  // 2. Redirects for wrong format
  routeRules: {
    // Redirect /about to /about/
    '/about': { redirect: '/about/' },
    '/blog': { redirect: '/blog/' }
    // ... every route
  }
})
```

Then set canonicals manually on each page:

```vue
<script setup lang="ts">
const route = useRoute()
const canonicalUrl = `https://example.com${route.path}${route.path.endsWith('/') ? '' : '/'}`

useHead({
  link: [{ rel: 'canonical', href: canonicalUrl }]
})
</script>
```

This works but doesn't scale.

### Nuxt SEO Setup

[**~~Nuxt SEO~~**](https://nuxtseo.com/docs/nuxt-seo/getting-started/introduction) handles all of it with one config:

nuxt.config.ts

```ts
export default defineNuxtConfig({
  modules: ['@nuxtjs/seo'],
  site: {
    url: 'https://example.com',
    trailingSlash: true
  }
})
```

This single option:

- Appends trailing slashes to all [**~~sitemap~~**](https://nuxtseo.com/docs/sitemap/getting-started/introduction) URLs
- Sets [**~~canonical URLs~~**](https://nuxtseo.com/docs/seo-utils/guides/canonical-url) with trailing slashes
- Formats [**~~OG image~~**](https://nuxtseo.com/docs/og-image/getting-started/introduction) URLs correctly

[Nuxt SEO  **  ** The all-in-one module that brings it all together.](https://nuxtseo.com/docs/nuxt-seo/getting-started/introduction)

## Redirects for Wrong Format

Even with correct internal links, external sites and old bookmarks may use the wrong format. Set up server-side redirects.

### Using Route Rules

nuxt.config.ts

```ts
export default defineNuxtConfig({
  routeRules: {
    // If using trailing slashes, redirect non-trailing to trailing
    '/about': { redirect: { to: '/about/', statusCode: 301 } },
    '/blog': { redirect: { to: '/blog/', statusCode: 301 } }
  }
})
```

### Using Server Middleware

For dynamic redirects across all routes:

server/middleware/trailing-slash.ts

```ts
export default defineEventHandler((event) => {
  const path = event.path
  // Skip API routes and files with extensions
  if (path.startsWith('/api') || path.includes('.'))
    return

  // Redirect non-trailing to trailing
  if (!path.endsWith('/')) {
    return sendRedirect(event, `${path}/`, 301)
  }
})
```

## Static Hosting and Prerendering

When prerendering, Nuxt generates `**/about**` as `**/about/index.html**` by default. Static hosts like Cloudflare Pages then redirect `**/about**` → `**/about/**` with a 308.

If you want trailing slashes, this is correct behavior.

If you don't want trailing slashes and are seeing unwanted 308 redirects, set `**autoSubfolderIndex: false**` to generate `**/about.html**` instead:

nuxt.config.ts

```ts
export default defineNuxtConfig({
  nitro: {
    prerender: {
      autoSubfolderIndex: false
    }
  }
})
```

## Checklist

**Checklist**

- Decide on trailing slashes or no trailing slashes for the whole site
- Set `**site.trailingSlash**` in Nuxt SEO, or configure NuxtLink, redirects, and canonicals manually
- Redirect the wrong format to the right one with `**routeRules**` or server middleware
- Confirm canonical URLs match your chosen format
- Check prerendered output matches your trailing slash setting ( `**autoSubfolderIndex**`)

[**The 2026 SEO Checklist for Nuxt & Vue ** Pre-launch setup, post-launch verification, and ongoing monitoring. Interactive checklist with links to every guide.](https://nuxtseo.com/learn-seo/checklist) [Haven't launched yet? Start with the **Pre-Launch Warmup**](https://nuxtseo.com/learn-seo/pre-launch-warmup)

---

### **Related **

[**Redirects**](https://nuxtseo.com/learn-seo/nuxt/controlling-crawlers/redirects)

[**Canonical URLs**](https://nuxtseo.com/learn-seo/nuxt/controlling-crawlers/canonical-urls)

[**Nuxt SEO**](https://nuxtseo.com/docs/nuxt-seo/getting-started/introduction)

[**Pagination** Google indexes page 1 and buries the rest when canonicals point the wrong way. Fix pagination in Nuxt with self-referencing canonicals and crawlable links.](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering/pagination) [**Query Parameters** Query parameters create duplicate content and waste crawl budget. Here's how to handle filters, sorting, and tracking params in Nuxt.](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering/query-parameters)

**On this page**

- [Why Enable Trailing Slashes](#why-enable-trailing-slashes)
- [Configuring NuxtLink](#configuring-nuxtlink)
- [SEO Configuration](#seo-configuration)
- [Redirects for Wrong Format](#redirects-for-wrong-format)
- [Static Hosting and Prerendering](#static-hosting-and-prerendering)
- [Checklist](#checklist)