The core usage of Nuxt 3 Composition API includes: 1. definePageMeta is used to define page meta information, such as title, layout and middleware, which needs to be called directly in
Nuxt 3's Composition API is a key tool for building modern, reusable, and easier to maintain Vue applications. It allows you to organize logic in a more flexible way in <script setup></script> of .vue files, especially for use in server-side rendering (SSR) and static generation (SSG) scenarios. Let’s break down the core usage and key concepts of the Composition API in Nuxt 3.
1. definePageMeta : define page meta information
In Nuxt 3, you can use definePageMeta to set the routing metadata of the page, such as title, middleware, layout, etc.
// pages/about.vue
<script setup>
definePageMeta({
title: 'About Us',
layout: 'custom',
middleware: 'auth'
})
</script> This macro will be analyzed statically at build time and therefore cannot be placed in conditional statements. It replaces the previous way of returning meta in setup() , which is more concise and efficient.
Note:
definePageMetawill not automatically set the<head>tag. You need touseHeadto dynamically control the page header.
2. useHead : manage page header tags
useHead is the core function used in the Composition API to set <head> content and supports responsive updates.
<script setup>
import { useHead } from '#head'
useHead({
title: 'My page',
meta: [
{ name: 'description', content: 'This is a great Nuxt 3 page' }
],
link: [
{ rel: 'canonical', href: 'https://example.com/page' }
]
})
</script>You can also pass in a responsive object to implement dynamic updates:
const title = ref('Loading...')
useHead(() => ({
title: title.value
}))
// Simulate asynchronous loading setTimeout(() => {
title.value = 'Content loaded'
}, 1000) 3. useAsyncData : handles asynchronous data acquisition
This is one of the most commonly used combo functions in Nuxt 3, which is used to securely obtain data on the server or client and automatically handle loading and error states.
<script setup>
const { data, pending, error } = await useAsyncData('user', () =>
$fetch('/api/user')
)
</script>-
data: responsive data -
pending: Boolean value indicating whether the request is in progress -
error: If there is an error, it will contain error information
You can also control the timing of data acquisition:
// Get const { data } = await useAsyncData('client-only', () => $fetch('/api/data'), {
server: false
})
// Mixed mode: the server gets a part, and the client refreshes const { data } = await useAsyncData('refresh-on-mount', () => getStats(), {
immediate: false,
transform: (result) => result.stats
}) 4. useFetch : simplifies API requests
useFetch is an encapsulation of useAsyncData $fetch , which can automatically infer request keys and avoid duplicate requests.
<script setup>
const { data, pending } = await useFetch('/api/posts')
</script> It will automatically generate keys based on the request URL, such as /api/posts → useFetch(/api/posts) . You can also manually specify the key:
const { data } = await useFetch('/api/user', { key: 'user-profile' })POST requests are also supported:
const { data } = await useFetch('/api/submit', {
method: 'POST',
body: { name: 'John' }
})Note:
useFetchonly supports JSON requests by default. Non-JSON responses need to be processed manually using$fetch.
5. useState : Share state across components
useState is used to create a globally responsive state and supports server synchronization.
// Define the state const counter = useState('counter', () => 0) // Use counter.value // Refer to the same state in multiple components const sameCounter = useState('counter') // The value is the same
This state is isolated when rendered on the server (independent for each request), but persists on the client. Suitable for storing user preferences, themes, shopping carts and other lightweight global states.
6. useCookie : manage cookie status
If you want to persist the state and support server-side access cookies, you can use useCookie .
const theme = useCookie('theme', { default: () => 'light' })
if (theme.value === 'dark') {
theme.value = 'light'
}It will automatically read cookies on the server and write cookies on the client, which is very suitable for scenes such as topic switching and language selection.
7. Vue native APIs such as onMounted , ref , and computed
The Composition API also fully supports Vue 3's standard responsive API:
<script setup>
import { ref, computed, onMounted } from 'vue'
const count = ref(0)
const double = computed(() => count.value * 2)
onMounted(() => {
console.log('Component mounted')
})
</script> These are exactly the same as what you use in normal Vue projects, but in Nuxt 3 you need to pay attention to SSR context limitations (for example, onMounted is only executed on the client).
Basically these core usages. Nuxt 3's Composition API allows you to complete tasks such as data acquisition, state management, SEO optimization in a more concise syntax, which is especially suitable for building high-performance SSR/SSG applications. The key is to understand the usage scenarios of useAsyncData , useFetch and useState , and then useHead and definePageMeta , you can write both elegant and efficient code.
The above is the detailed content of The Nuxt 3 Composition API Explained. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undress AI Tool
Undress images for free
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
ArtGPT
AI image generator for creative art from text prompts.
Stock Market GPT
AI powered investment research for smarter decisions
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
JavaScript realizes click-through image switching effect: professional tutorial
Sep 18, 2025 pm 01:03 PM
This article will introduce how to use JavaScript to achieve the effect of clicking on images. The core idea is to use HTML5's data-* attribute to store the alternate image path, and listen to click events through JavaScript, dynamically switch the src attributes, thereby realizing image switching. This article will provide detailed code examples and explanations to help you understand and master this commonly used interactive effect.
How to get the user's location with the Geolocation API in JavaScript?
Sep 21, 2025 am 06:19 AM
First, check whether the browser supports GeolocationAPI. If supported, call getCurrentPosition() to get the user's current location coordinates, and obtain the latitude and longitude values ??through successful callbacks. At the same time, provide error callback handling exceptions such as denial permission, unavailability of location or timeout. You can also pass in configuration options to enable high precision, set the timeout time and cache validity period. The entire process requires user authorization and corresponding error handling.
The Nuxt 3 Composition API Explained
Sep 20, 2025 am 03:00 AM
Nuxt3's Composition API core usage includes: 1. definePageMeta is used to define page meta information, such as title, layout and middleware, which need to be called directly in it and cannot be placed in conditional statements; 2. useHead is used to manage page header tags, supports static and responsive updates, and needs to cooperate with definePageMeta to achieve SEO optimization; 3. useAsyncData is used to securely obtain asynchronous data, automatically handle loading and error status, and supports server and client data acquisition control; 4. useFetch is an encapsulation of useAsyncData and $fetch, which automatically infers the request key to avoid duplicate requests
How to create a repeating interval with setInterval in JavaScript
Sep 21, 2025 am 05:31 AM
To create a repetition interval in JavaScript, you need to use the setInterval() function, which will repeatedly execute functions or code blocks at specified milliseconds intervals. For example, setInterval(()=>{console.log("Execute every 2 seconds");},2000) will output a message every 2 seconds until it is cleared by clearInterval(intervalId). It can be used in actual applications to update clocks, poll servers, etc., but pay attention to the minimum delay limit and the impact of function execution time, and clear the interval in time when no longer needed to avoid memory leakage. Especially before component uninstallation or page closing, ensure that
How to copy text to the clipboard in JavaScript?
Sep 18, 2025 am 03:50 AM
Use the writeText method of ClipboardAPI to copy text to the clipboard, it needs to be called in security context and user interaction, supports modern browsers, and the old version can be downgraded with execCommand.
How to create a multi-line string in JavaScript?
Sep 20, 2025 am 06:11 AM
TheBestAtOrreatEamulti-LinestringinjavascriptSisingStisingTemplatalalswithbacktTicks, whichpreserveTicks, WhichpreserveReKeAndEExactlyAswritten.
How to create and use Immediately Invoked Function Expressions (IIFE) in JavaScript
Sep 21, 2025 am 05:04 AM
AnIIFE(ImmediatelyInvokedFunctionExpression)isafunctionthatrunsassoonasitisdefined,createdbywrappingafunctioninparenthesesandimmediatelyinvokingit,whichpreventsglobalnamespacepollutionandenablesprivatescopethroughclosure;itiswrittenas(function(){/cod
How to parse a JSON string into a JavaScript object
Sep 21, 2025 am 05:43 AM
To parse JSON strings into JavaScript objects, you should use the JSON.parse() method, which can convert valid JSON strings into corresponding JavaScript objects, supports parsing nested objects and arrays, but will throw an error for invalid JSON. Therefore, you need to use try...catch to handle exceptions. At the same time, you can convert the value during parsing through the reviver function of the second parameter, such as converting the date string into a Date object, thereby achieving safe and reliable data conversion.
