layouts

Nuxt provides a layouts framework to extract common UI patterns into reusable layouts.

设置 layout

• 使用 <NuxtLayout> 组件，提供 name 属性。

<template>
  <NuxtLayout :name="layout">
    <NuxtPage />
  </NuxtLayout>
</template>

• 使用 definePageMeta 函数:

<script setup lang="ts">
definePageMeta({
  layout: 'custom'
})
</script>

• 使用 setPageLayout 动态设置：

<script setup lang="ts">
function enableCustomLayout () {
  setPageLayout('custom')
}
definePageMeta({
  layout: false,
});
</script>

middleware

Nuxt 提供了中间件，用于在导航到特定路由之前运行代码。路由中间件是接收当前路由和下一个路由作为参数的导航守卫。

middleware 可以定义在 middleware 目录下，每个文件都是一个中间件，如果是全局路由，文件名需要增加.global前缀。

也可以在 defineMiddleware 函数中的middleware属性中定义（inline）。

Nuxt 提供了两个全局可用的 helper，可以直接从中间件返回，对路由进行重定向或取消导航。

export default defineNuxtRouteMiddleware((to, from) => {
  // 用于取消路由导航行为
  return abortNavigation();
  return abortNavigation(error);

  // 用于重定向行为
  return navigateTo("/");
  return navigateTo("/", { redirectCode: 301 });
});

plugins

Nuxt 有一个插件系统，可以在创建 Vue 应用程序时使用 Vue 插件和更多插件。

Nuxt 会自动读取 plugins 根目录下的所有文件，并将它们作为插件导入。

如果是二级目录，则需要通过 nuxt.config.ts 的 plugins 配置来添加插件。

export default defineNuxtConfig({
  plugins: ["~/plugins/bar/baz", "~/plugins/bar/foz"],
});

在 Nuxt3 中，创建插件的方式与 Nuxt2 不同，需要使用defineNuxtPlugin函数。

export default defineNuxtPlugin((nuxtApp) => {
  // Doing something with nuxtApp
});

另外，还支持更高级的 Object Syntax Plugins 对象语法定义插件。

插件引入的顺序是按照字母顺序的编号来定的，因此，可以在插件文件名前增加字母数字，比如：01.foo.js、02.bar.js，这里 01、02 是插件的优先级，数字越小优先级越高。因此02.bar.js可以访问到01.foo.js中的内容。

特别注意：“文件名是按字符串排序的，而不是按数字值排序的。例如，10.myPlugin.ts 将在 2.myOtherPlugin.ts 之前出现。这就是为什么该示例在个位数前加上 0 的原因。”

如果一个插件需要等待另一个插件才能运行，你可以将插件的名称添加到 dependsOn 数组中。

export default defineNuxtPlugin({
  name: "depends-on-my-plugin",
  dependsOn: ["my-plugin"],
  async setup(nuxtApp) {
    // this plugin will wait for the end of `my-plugin`'s execution before it runs
  },
});