Nuxt SEO Layer

A Nuxt layer that provides essential SEO configuration for Nuxt projects, including sitemap generation, robots.txt, and automated linting.

Features

• Sitemap generation via @nuxtjs/sitemap
• Robots.txt configuration via @nuxtjs/robots
• ESLint integration with stylistic rules
• Optimized for search engine visibility

Configuration

The SEO layer includes the following modules:

// nuxt.config.ts in the seo layer
export default defineNuxtConfig({
  modules: ["@nuxtjs/sitemap", "@nuxtjs/robots", "@nuxt/eslint"],
  eslint: {
    config: {
      stylistic: true
    }
  }
})

Development

# Install dependencies
npm install

# Start development server
npm run dev

# Run ESLint
npm run lint

# Fix linting issues automatically
npm run lint:fix

# Run TypeScript type checking
npm run typecheck

Usage

To use this layer in your Nuxt project:

// nuxt.config.ts
export default defineNuxtConfig({
  extends: [
    '@cooperco/nuxt-layer-seo'
  ]
})

This will automatically include the SEO layer features.

Dependencies

The SEO layer includes:

• @nuxtjs/sitemap
• @nuxtjs/robots
• @nuxt/eslint

These provide a solid SEO foundation for your Nuxt application.

Claude Code Skills

This repo includes Claude Code skills for common tasks in apps that use these layers. To use them, copy the relevant skill files from the skills/ directory into your app's .claude/skills/ directory.

Skills provided by the SEO layer:

| Skill | File | Description | |-------|------|-------------| | /add-sitemap-source | skills/add-sitemap-source.md | Add dynamic sitemap URL sources with defineSitemapEventHandler and configure sitemap.sources |

# Copy SEO layer skills into your app
mkdir -p .claude/skills
cp node_modules/@cooperco/nuxt-layer-seo/../../skills/add-sitemap-source.md .claude/skills/

Or copy them directly from the nuxt-layers repository.

Publishing to npm (tag-based)

This layer is published using GitHub Actions when you push a tag that matches the seo-vX.Y.Z pattern.

High-level flow:

• Bump the version in layers/seo/package.json (SemVer).
• Commit and push your changes to main (or ensure the commit is on main).
• Create and push a tag named seo-vX.Y.Z (matching the package.json version).
• The Publish SEO Layer workflow installs deps, checks if that exact version already exists on npm, and if not, publishes to npm.

Important notes:

• Do NOT rely on npm version creating a tag for you (it will create vX.Y.Z). We use a custom tag prefix seo-v.
• The workflow will skip if the version already exists.

Step-by-step

1. Bump the version in layers/seo/package.json

• Option A (recommended): use npm version without creating a tag
  • Bash:

    cd layers/seo
    npm version patch --no-git-tag-version  # or minor | major

  • PowerShell:

    Set-Location layers/seo
    npm version patch --no-git-tag-version  # or minor | major

• Option B: manually edit the version field in layers/seo/package.json (SemVer: MAJOR.MINOR.PATCH)

2. Commit and push the change (from repo root or layers/seo)

git add layers/seo/package.json
git commit -m "chore(seo): bump version"
git push origin main

3. Create and push the tag using the new version

• Get the new version value:
  • Bash:

    cd layers/seo
    VERSION=$(node -p "require('./package.json').version")
    cd ../..
    git tag "seo-v$VERSION"
    git push origin "seo-v$VERSION"

  • PowerShell:

    Set-Location layers/seo
    $version = node -p "require('./package.json').version"
    Set-Location ../..
    git tag "seo-v$version"
    git push origin "seo-v$version"

4. GitHub Actions will publish

• Workflow: .github/workflows/publish-seo.yml
• Auth: uses NPM_TOKEN configured as a GitHub secret
• Behavior: installs, checks npm view @cooperco/nuxt-layer-seo@<version>, publishes if not found

Troubleshooting

• Version already exists: bump the version again (patch/minor/major) and push a new tag.
• Auth errors (401/403): ensure NPM_TOKEN is set in repo secrets and org access is correct.