title: Getting to grips with Nuxt 3's page metadata: Customizing with definePageMeta
date: 2024/8/11
updated: 2024/8/11
author: cmdragon
excerpt:
Abstract: This article describes in detail how to use definePageMeta in Nuxt 3 framework, including how to define metadata for page components, such as layout, transition effects, routing middleware and so on. Specific examples show how to set each metadata property and how to use definePageMeta to customize the page layout and middleware logic to enhance the routing management and page control of the application.
categories:
- front-end development
tags:
- Nuxt3
- page metadata
- definePageMeta
- opening (chess jargon)
- middleware
- routing (in computer networks)
- transition effect
scanningtwo-dimensional barcodeFollow or microsoft search:Programming Intelligence Front-End to Full-Stack Communication and Growth
When developing applications with Nuxt 3, thedefinePageMeta is a very useful feature. It allows you to define various metadata for your page components that affect routing, layout, middleware, transitions, and many other aspects.
1. What isdefinePageMeta？
definePageMeta is a compiler macro used in Nuxt 3 to define metadata for page components. Compiler macros are used to define metadata for page components in Nuxt 3 by using thedefinePageMeta, you can configure custom page metadata for each static or dynamic route. This metadata can include layouts, transition effects, routing middleware, and more.
2. definePageMeta Basic Usage
To use thedefinePageMetaYou'll need to add a new file to the<script setup> Define adefinePageMeta call and passes in an object containing the page's metadata.
sample code (computing)
<template>
<div>
<h1>Welcome to my page.</h1>
</div>
</template>
<script setup lang="ts">
definePageMeta({
layout: 'default'
})
</script>
In this example, we have created a new value for the The page component defines a layout asdefault of the metadata. This means that the page will use thelayouts/ The layout defined in the file.
3. definePageMeta The attributes of the
3.1 name
name Used to define a name for the page's route. By default, the name is based on thepages/ The path in the directory is generated.
<script setup lang="ts">
definePageMeta({
name: 'custom-page-name'
})
</script>
3.2 path
path Allows you to define a complex path matcher. Use this property if you need a more complex pattern than a filename.
<script setup lang="ts">
definePageMeta({
path: '/custom/path/:id'
})
</script>
3.3 alias
alias Allows you to define additional paths that will work like copies of the record.
<script setup lang="ts">
definePageMeta({
alias: ['/alias-path', '/another-alias']
})
</script>
3.4 keepalive
keepalive Used to control the caching of components. When set totrue when the page state will be preserved. You can also provideKeepAliveProps for fine control.
<script setup lang="ts">
definePageMeta({
keepalive: true
})
</script>
3.5 key
key For finer-grained control<NuxtPage> Component re-rendering.
<script setup lang="ts">
definePageMeta({
key: (route) =>
})
</script>
3.6 layout
layout Used to set the name of the static or dynamic layout. If set tofalse, then the default layout is disabled.
<script setup lang="ts">
definePageMeta({
layout: 'admin'
})
</script>
3.7 layoutTransition
layoutTransition Sets the name of the layout transition effect. Set the name of thefalse Layout transitions can be disabled.
<script setup lang="ts">
definePageMeta({
layoutTransition: {
name: 'fade',
mode: 'out-in'
}
})
</script>
3.8 middleware
middleware Allows you to define middleware to handle routing logic. Middleware in the form of functions or strings can be used.
<script setup lang="ts">
definePageMeta({
middleware: [
function (to, from) {
const auth = useState('auth')
if (!) {
return navigateTo('/login')
}
}
]
})
</script>
Or:
<script setup lang="ts">
definePageMeta({
middleware: 'auth'
})
</script>
3.9 pageTransition
pageTransition Sets the name of the page transition effect. Set the name of thefalse Page transitions can be disabled.
<script setup lang="ts">
definePageMeta({
pageTransition: {
name: 'fade',
mode: 'out-in'
}
})
</script>
3.10 redirect
redirect Used to set the redirection target when directly matching a route.
<script setup lang="ts">
definePageMeta({
redirect: '/home'
})
</script>
3.11 validate
validate Used to verify if the current route is valid. If it is not valid, you can returnfalse or a file containing thestatusCode cap (a poem)statusMessage The object of the
<script setup lang="ts">
definePageMeta({
validate: (route) => {
return ? true : { statusCode: 404, statusMessage: 'Not Found' }
}
})
</script>
3.12 scrollToTop
scrollToTop Used to control whether to scroll to the top before rendering the page.
<script setup lang="ts">
definePageMeta({
scrollToTop: true
})
</script>
4. Customized attributes
In addition to the above properties, you can also define custom metadata:
<script setup lang="ts">
definePageMeta({
pageType: 'Checkout'
})
</script>
Defining layouts and middleware
1. Defining the layout
In Nuxt 3, layout controls the appearance and structure of a page. Layout is controlled through thedefinePageMetaYou can specify a layout file for each page. Layout files are usually located in thelayouts/ Catalog.
Sample code: set up a customized layout
<script setup lang="ts">
definePageMeta({
// Set the page to use the 'admin' layout
layout: 'admin'
})
</script>
In the example above, the page will use thelayouts/ The layout defined in the file. If you have a specific layout requirement, you can define it in thelayouts/ directory to create the appropriate layout files and pass thelayout attribute is specified.
Sample Code: Disable Default Layout
<script setup lang="ts">
definePageMeta({
// Disable default layout
layout: false
})
</script>
by combininglayout property is set tofalse, you can disable the default layout. This is useful when you need full control over the layout of a page or don't want any layout applied to the page.
2. Defining middleware
Middleware is a piece of code that executes before or after a route switch to handle routing logic, such as permission validation or redirection. In Nuxt 3, you can pass thedefinePageMeta Define the middleware directly.
Sample code: using the function to define the middleware
<script setup lang="ts">
definePageMeta({
middleware: [
function (to, from) {
const auth = useState('auth')
if (!) {
return navigateTo('/login')
}
if ( !== '/checkout') {
return navigateTo('/checkout')
}
}
]
})
</script>
In this example, the middleware function checks the authentication status of the user. If the user is not authenticated, it redirects to the login page. If the user path is not/checkoutThe function redirects to the checkout page. You can add more complex logic to the function according to your actual needs.
Sample Code: Using Middleware File Names
<script setup lang="ts">
definePageMeta({
// set to the name of the middleware file (in the middleware/ directory)
middleware: 'auth'
})
</script>
by combiningmiddleware property is set to a string, you can specify a middleware file name. This middleware file should be placed in themiddleware/ directory and should conform to Nuxt's middleware conventions.
Sample code: using multiple middleware
<script setup lang="ts">
definePageMeta({
// Setting up multiple middleware
middleware: ['auth', 'another-named-middleware']
})
</script>
You can also specify multiple middleware in the form of an array, and Nuxt will execute them sequentially.
summarize
pass (a bill or inspection etc)definePageMetaYou have the flexibility to configure layouts and middleware for pages in your Nuxt 3 application. Whether you are setting up a custom layout or defining middleware, thedefinePageMeta All offer great features to meet your needs.
For the rest of the article, please click to jump to the personal blog page or scan the code to follow or WeChat search:Programming Intelligence Front-End to Full-Stack Communication and Growth, read the full article:Getting to grips with Nuxt 3's page metadata: custom configurations with definePageMeta | cmdragon's Blog
Past articles are archived:
- Creating Route Middleware with defineNuxtRouteMiddleware | cmdragon's Blog
- Defining Vue Components with defineNuxtComponent` | cmdragon's Blog
- Detailed Guide to Creating Error Objects with createError | cmdragon's Blog
- Clear Nuxt state cache: clearNuxtState | cmdragon's Blog
- Clear Nuxt Data Cache: clearNuxtData | cmdragon's Blog
- Clearing processed errors with clearError | cmdragon's Blog
- Dynamically Adding Middleware with addRouteMiddleware | cmdragon's Blog
- Blocking Navigation with abortNavigation | cmdragon's Blog
- HTTP request using $fetch | cmdragon's Blog
- Managing Responsive State with useState | cmdragon's Blog
- Optimize your website for SEO with useServerSeoMeta | cmdragon's Blog
- SEO Configuration with useSeoMeta | cmdragon's Blog
- Must Read: Runtime Configuration Made Easy with useRuntimeConfig | cmdragon's Blog
- Route Management: The useRouter Method and Routing Middleware Applications | cmdragon's Blog
- UseRoute Function Details and Examples | cmdragon's Blog
- Accessing a request URL using the useRequestURL combinatorial function | cmdragon's Blog
- Configuring and Using Environment Variables | cmdragon's Blog
- Data fetching in server-side rendering: combining useRequestHeaders and useFetch | cmdragon's Blog
- Accessing Request Events with the useRequestEvent Hook | cmdragon's Blog