【Nuxt3】plugins目录介绍和nuxt3插件的用法_nuxt3 plugins

简言

记录下nuxt3plugins的使用方法。

plugins

在创建 Vue 应用程序时，Nuxt 会自动读取 plugins/ 目录中的文件并加载它们。一个文件就相当于一个插件。

plugin 注册

plugins/ 目录里面的所有插件都是自动注册的，无需单独添加到 nuxt.config 中。
可以在文件名中使用 .server 或 .client 后缀，以便只在服务器或客户端加载插件。

只有目录顶层的文件（或任何子目录中的索引文件）才会自动注册为插件。

-| plugins/
---| foo.ts      // ok
---| bar/
-----| baz.ts    // no
-----| foz.vue   // no
-----| index.ts  // ok

1
2
3
4
5
6
7

只有 foo.ts 和 bar/index.ts 会被注册。
要在子目录中添加插件，可以使用 nuxt.config.ts 配置文件中的插件选项：

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

1
2
3
4
5
6
7

注册顺序

您可以通过在文件名前加上 "按字母顺序 "编号来控制插件的注册顺序。

plugins/
 | - 01.myPlugin.ts
 | - 02.myOtherPlugin.ts

1
2
3
4

在本例中，02.myOtherPlugin.ts 将能够访问 01.myPlugin.ts 注入的任何内容。

以字符串形式排序的，

创建一个plugin

需要借助defineNuxtPlugin创建一个插件，它接收一个返回插件对象的函数或这个插件配置对象：

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

1
2
3
4

或者：

export default defineNuxtPlugin({
  name: 'my-plugin',
  enforce: 'pre', // or 'post' 运行时机
  async setup (nuxtApp) {
    // this is the equivalent of a normal functional plugin
  },
  hooks: {
    // You can directly register Nuxt app runtime hooks here
    'app:created'() {
      const nuxtApp = useNuxtApp()
      // do something in the hook
    }
  },
  env: {
    // Set this value to `false` if you don't want the plugin to run when rendering server-only or island components.
    islands: true
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

plugin配置对象

• name — 插件名称。
• parallel — 是否为并行插件，为true后，下一个的插件不会等当前插件执行结束再加载。
• dependsOn — 依赖插件数组，如果一个插件在运行前需要等待一个其他插件执行，可以将该插件的名称添加到 dependsOn 数组中。
• setup（） — 插件内容函数，nuxtApp为参数，可以使用 nuxtApp 做一些事情，还可以返回一个可合并nuxtApp的对象。
• hooks — 可以在此处直接注册 Nuxt 应用程序运行时钩子函数。
• env — 插件环境设置对象。

插件类型

在导入插件时，如果插件有类型，会自动键入到模板和useNuxtApp中，如果有其他自定义的，可以在声明文件上合并混入：
例如，index.d.ts中：

declare module '#app' {
  interface NuxtApp {
    $hello (msg: string): string
  }
}

declare module 'vue' {
  interface ComponentCustomProperties {
    $hello (msg: string): string
  }
}

export {}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

vue插件

如果你想使用 Vue 插件，可以在nuxt插件中导入，
使用nuxtApp.vueApp.use()导入。
nuxtApp.vueApp是一个vue应用实例对象，可以使用use、provide、directive、component等方法。

示例

使用mavonEditor插件，

import mavonEditor from 'mavon-editor'
import "mavon-editor/dist/css/index.css"
/**
 * vue 使用mavon-editor
 */

export default defineNuxtPlugin({
  name: 'my-markdown',
  enforce: 'pre', // or 'post'
  async setup(nuxtApp) {
    // this is the equivalent of a normal functional plugin
    nuxtApp.vueApp.use(mavonEditor)

  },
  hooks: {
    // You can directly register Nuxt app runtime hooks here
    'app:created'() {
      const nuxtApp = useNuxtApp()
      // do something in the hook
    }
  },
  env: {
    // Set this value to `false` if you don't want the plugin to run when rendering server-only or island components.
    islands: false
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

创建一个自定义插件

/*
 * @Date: 2024-03-18 13:59:01
 * @LastEditors: zhangsk
 * @LastEditTime: 2024-03-18 14:36:35
 * @FilePath: \my-blog-nuxt\plugins\aa.ts
 * @Label: Do not edit
 */
export default defineNuxtPlugin((nuxtApp) => {
  //  
  nuxtApp.vueApp.use({
    install(app) {
      app.config.globalProperties.$mouse = {
        open: () => {
          console.log('open')
        },
        close: () => {
          console.log('close')
        },
      }
    },
  })

  return {
    provide: {
      /**
       * 这个一个函数
       */
      mouse: () => {
        console.log('这是mouse事件');

      },
    },
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

添加声明：

declare module '#app' {
  interface NuxtApp {
    $mouse(): void
  }
}

declare module "vue" {
  interface ComponentCustomProperties {
    $mouse: () => void
  }
}
1
2
3
4
5
6
7
8
9
10
11

使用：

 const nuxtApp = useNuxtApp();
 nuxtApp.$mouse();
1
2

结语

普通的vue3项目依赖都是在createApp返回的实例中调用use()函数加载。
而在nuxt3中则需要借用nuxt插件对象中的nuxtApp.vueApp.use()加载。
结束了。