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 🚀
▲ 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:
As Nuxt does not have an App dir, you can place your images inside your
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." />
app.seoMeta ✨ Nuxt Config
The useSeoMeta composable is a powerful tool for managing SEO meta tags.
This module brings the power of
To use it, simply add within the
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
🧙 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
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
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
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 useautomaticOgAndTwitterTags inferTagsFromFiles - removed usemetaDataFiles
Behaviour Changes
Version 3.0.0 now avoids setting a default
export default defineNuxtConfig({
app: {
head: {
titleTemplate: '%s %separator %siteName'
}
}
})