SEO-Friendly URLs in Nuxt

export function useSeoSlug(text: string): string {
  return text
    .toLowerCase()
    .replace(/[^a-z0-9]+/g, '-') // Replace non-alphanumeric with hyphens
    .replace(/^-+|-+$/g, '') // Trim leading/trailing hyphens
    .substring(0, 60) // Keep under 60 chars
}

<script setup lang="ts">
const route = useRoute()
const slug = route.params.slug

// Set canonical URL
useHead({
  link: [{
    rel: 'canonical',
    href: `https://mysite.com/blog/${slug}`
  }]
})
</script>

<script setup lang="ts">
const route = useRoute()
const category = route.params.category
const sort = route.query.sort || 'popular'
const page = route.query.page || '1'

// Canonical URL excludes query params
useHead({
  link: [{
    rel: 'canonical',
    href: `https://mysite.com/products/${category}`
  }]
})
</script>

<template>
  <div>
    <!-- URL: /products/phones?sort=price&page=2 -->
    <!-- Canonical: /products/phones -->
  </div>
</template>

<script setup lang="ts">
const route = useRoute()
const slug = route.params.slug

// Fetch content based on slug
const { data: post } = await useFetch(`/api/posts/${slug}`)

// Set meta tags
useSeoMeta({
  title: post.value.title,
  description: post.value.excerpt,
  ogUrl: `https://mysite.com/blog/${slug}`
})

useHead({
  link: [{
    rel: 'canonical',
    href: `https://mysite.com/blog/${slug}`
  }]
})
</script>

<script setup lang="ts">
const route = useRoute()
const category = route.params.category
const slug = route.params.slug

const { data: product } = await useFetch(
  `/api/products/${category}/${slug}`
)

useSeoMeta({
  title: `${product.value.name} - ${category}`,
  description: product.value.description
})
</script>

<script setup lang="ts">
const route = useRoute()
const query = Array.isArray(route.params.params)
  ? route.params.params[0]
  : route.params.params

useHead({
  link: [{
    rel: 'canonical',
    href: `https://mysite.com/search/${query}`
  }]
})
</script>

export function useSlugFromTitle(title: string): string {
  return title
    .toLowerCase()
    .trim()
    // Replace accented characters
    .normalize('NFD')
    .replace(/[\u0300-\u036F]/g, '')
    // Replace non-alphanumeric with hyphens
    .replace(/[^a-z0-9]+/g, '-')
    // Remove leading/trailing hyphens
    .replace(/^-+|-+$/g, '')
    // Limit length
    .substring(0, 60)
}

const title = 'Vue Router: The Complete Guide (2025)'
const slug = useSlugFromTitle(title)
// Result: "vue-router-the-complete-guide-2025"

export function useInternationalSlug(text: string): string {
  return text
    .toLowerCase()
    .trim()
    // Keep Unicode letters and numbers
    .replace(/[^\p{L}\p{N}]+/gu, '-')
    .replace(/^-+|-+$/g, '')
    .substring(0, 60)
}

async function generateUniqueSlug(title: string): Promise<string> {
  const baseSlug = useSlugFromTitle(title)
  let slug = baseSlug
  let counter = 1

  while (await slugExists(slug)) {
    slug = `${baseSlug}-${counter}`
    counter++
  }

  return slug
}

export default defineNuxtConfig({
  routeRules: {
    '/old-blog-post': { redirect: '/blog/new-post' },
    '/old-path/**': { redirect: '/new-path/**' }
  }
})

import { describe, expect, it } from 'vitest'
import { useSlugFromTitle } from '~/composables/useSlugFromTitle'

describe('useSlugFromTitle', () => {
  it('converts title to lowercase slug', () => {
    expect(useSlugFromTitle('Vue Router Guide'))
      .toBe('vue-router-guide')
  })

  it('replaces spaces with hyphens', () => {
    expect(useSlugFromTitle('Learn Vue Router'))
      .toBe('learn-vue-router')
  })

  it('removes special characters', () => {
    expect(useSlugFromTitle('Vue & React!'))
      .toBe('vue-react')
  })

  it('limits length to 60 chars', () => {
    const longTitle = 'A'.repeat(100)
    expect(useSlugFromTitle(longTitle).length).toBe(60)
  })
})