插件 plugins
插件目录
Nuxt 将自动读取"plugins"目录中的文件并加载它们。如果仅想在服务器端或客户端加载插件时,可以在文件名中使用.server
或.client
后缀。
:::alert{type=warning} plugins/
目录中的所有插件都是自动注册的,因此您不应将它们单独添加到"nuxt.config"中。 :::
创建插件
传递给插件的唯一参数是 nuxtApp
.
import { defineNuxtPlugin } from '#app'
export default defineNuxtPlugin((nuxtApp) => {
// Doing something with nuxtApp
})
自动提供 helper 功能
如果您想在NuxtApp
实例上提供 helper 功能,只需在插件中provide
键值返回即可。例如:
import { defineNuxtPlugin } from '#app'
export default defineNuxtPlugin(() => {
return {
provide: {
hello: () => 'world',
},
}
})
在另一个文件中,您可以使用以下内容:
<template>
<div>
{{ $hello() }}
</div>
</template>
<script setup lang="ts">
// alternatively, you can also use it here
const { $hello } = useNuxtApp()
</script>
自动猜测类型的插件
如果您从插件返回 helpers,它们将被自动加上类型;如果调用useNuxtApp()
,你会在这个返回值发现它们的类型,在您的模板中也是这样自动处理。
:::alert 如果您需要在另一个插件中使用提供的 helper,则可以调用useNuxtApp()
来获取类型的版本。但一般来说应避免这种情况,除非您确定插件的调用顺序。 :::
高级用法
对于高级用例,您可以声明注入属性的类型,如下所示:
declare module '#app' {
interface NuxtApp {
$hello(msg: string): string
}
}
declare module '@vue/runtime-core' {
interface ComponentCustomProperties {
$hello(msg: string): string
}
}
export {}
Vue 插件
如果你想使用 Vue 插件,比如 vue-gtag 来添加 Google Analytics 标签,你可以使用 Nuxt 插件来做到这一点。
有一个开放的 RFC 可以使这更容易!参见 nuxt/framework#1175
首先安装所需的插件。
yarn add --dev vue-gtag-next
然后创建一个插件文件plugins/vue-gtag.client.js
。
import { defineNuxtPlugin } from '#app'
import VueGtag from 'vue-gtag-next'
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(VueGtag, {
property: {
id: 'GA_MEASUREMENT_ID',
},
})
})