v3.0.0

Background

Nuxt should look to adopt popular conventions from other frameworks that can improve the developer experience. In this major release we take a small step towards that.

Likewise in this major, we explore the conventions of Nuxt and see what we can do to improve the developer experience.

Features :rocket:

▲ Next.js inspired Metadata Files

This is a popular convention in Next.js that allows you to define metadata for your pages through the files themselves.

This is now implemented with support for:

• App Icons / Logos
• Open Graph / Twitter Images

As Nuxt does not have an App dir, you can place your images inside your pages directory. This also follows the convention of @nuxt/content, where you can use a _dir folder to store your images.

pages/
├── about/
│   ├── index.vue
│   └── _dir/
│       ├── og-image.png
│       ├── og-image.txt
│       ├── twitter-image.png
│       └── twitter-image.txt
public/
└── logo.png

<link rel="icon" href="/logo.png" sizes="<generated>" />
<meta property="og:image" content="<site-url>/about/_dir/og-image.png" />
<meta property="og:image:width" content="<generated>>" />
<meta property="og:image:height" content="<generated>" />
<meta property="og:image:type" content="image/<generated>" />
<meta property="og:image:alt" content="This is the alternate text for my image." />
<meta name="twitter:image" content="<site-url>/about/_dir/twitter-image.png" />
<meta name="twitter:image:width" content="<generated>" />
<meta name="twitter:image:height" content="<generated>" />
<meta name="twitter:image:type" content="image/<generated>" />
<meta name="twitter:image:alt" content="This is the alternate text for my image." />

✨ Nuxt Config app.seoMeta

The useSeoMeta composable is a powerful tool for managing SEO meta tags.

This module brings the power of useSeoMeta to your nuxt.config.

To use it, simply add within the app.seoMeta config of your nuxt.config:

export default defineNuxtConfig({
  app: {
    head: {
      seoMeta: {
        ogImage: 'https://example.com/my-og-image.png'
      }
    }
  }
})

The functionality is the same as the composable without reactivity. It has a higher priority than app.head.

🧙 Route Rules

Providing SEO meta tags for dynamic pages at build time can be difficult.

To make this easier, you can leverage the power of Route Rules to provide dynamic SEO meta tags for your pages.

Supporting both seoMeta and head inputs, you can provide SEO meta tags for your dynamic pages.

export default defineNuxtConfig({
  routeRules: {
    '/blog/**': {
      seoMeta: {
        ogImage: 'https://example.com'
      },
      head: {
        link: [
          { rel: 'icon', type: 'image/png', href: '/blog-icon.png' }
        ]
      }
    },
  }
})

Nuxt Site Config

The siteUrl config was required for prerendering the og:image to an absolute path, this is now deprecated.

Instead, nuxt-site-config is used which automatically sets the URL for some environments.

See the installation page for more details.

Deprecations and Breaking Changes

Breaking Changes

The DebugHead component has been removed.

DevTools has a tab that can be used to debug your meta tags.

API Changes

The following options have been removed from nuxt.config:

• seoOptimise - removed use automaticOgAndTwitterTags
• inferTagsFromFiles - removed use metaDataFiles

Behaviour Changes

Version 3.0.0 now avoids setting a default titleTemplate for you. You should now set this yourself.

export default defineNuxtConfig({
  app: {
    head: {
      titleTemplate: '%s %separator %siteName'
    }
  }
})