base_ui/hooks/hooks_defineNuxtConfig.md

110 lines
2.5 KiB
Markdown
Raw Normal View History

2025-02-01 09:34:55 +00:00
1. appReady
This hook is called when the application is fully initialized and ready to use. It can be used to perform tasks such as:
Initializing plugins
Setting up middleware
Logging application startup
typescript
export default defineNuxtConfig({
hooks: {
'app:ready': async (nuxt) => {
// Initialize plugins
await initPlugins(nuxt);
// Set up middleware
await setupMiddleware(nuxt);
}
}
})
2. appMount
This hook is called when the application is mounted to the DOM. It can be used to perform tasks such as:
Initializing the application
Setting up event listeners
Logging application mount
export default defineNuxtConfig({
hooks: {
'app:mount': async (nuxt) => {
// Initialize the application
await initApplication(nuxt);
// Set up event listeners
await setupEventListeners(nuxt);
}
}
})
3. appDestroy
This hook is called when the application is destroyed. It can be used to perform tasks such as:
Cleaning up resources
Logging application destroy
Handling errors
export default defineNuxtConfig({
hooks: {
'app:destroy': async (nuxt) => {
// Clean up resources
await cleanupResources(nuxt);
// Log application destroy
console.log('Application destroyed');
}
}
})
4. routeReady
This hook is called when a route is ready to be rendered. It can be used to perform tasks such as:
Preparing data for rendering
Setting up middleware
Logging route render
export default defineNuxtConfig({
hooks: {
'route:ready': async (route) => {
// Prepare data for rendering
const data = await prepareData(route);
// Set up middleware
await setupMiddleware(route);
}
}
})
5. error
This hook is called when an error occurs. It can be used to perform tasks such as:
Logging errors
Handling errors
Displaying error messages
export default defineNuxtConfig({
hooks: {
'error': async (error, nuxt) => {
// Log the error
console.error(error);
// Handle the error
nuxt.app.context.error = error;
}
}
})
6. middleware
This hook is called for every incoming request. It can be used to perform tasks such as:
Handling authentication
Setting up middleware
Logging requests
export default defineNuxtConfig({
hooks: {
'middleware': async (req, res) => {
// Handle authentication
const user = await authenticateUser(req);
if (!user) {
res.status(401).send({ error: 'Unauthorized' });
}
}
}
})