【Nuxt3从入门到实战】巧用Nuxt插件机制，扩展强化Nuxt的利器！

村长学前端 2021-12-03

3785

视频教程

前言

大家好，我是村长，欢迎关注我的公众号村长学前端和B站Young村长

上一篇写了Nuxt3状态共享，本篇我们研究nuxt3的插件系统。通过插件系统，我们可以获取nuxt实例以及vue实例，这样我们有机会扩展nuxt或vue，比如引入一个UI库。

plugins目录

Nuxt3会自动读取plugins目录下的文件并加载它们。我们可以在文件名上使用.server或者.client前缀使他们仅作用于服务端或者客户端。

创建插件

使用defineNuxtPlugin()注册一个插件：

import { defineNuxtPlugin } from '#app'
// 唯一的参数是nuxt实例
export default defineNuxtPlugin(nuxtApp => {
  // Doing something with nuxtApp
})

插件用例：自动提供帮助方法

一个常见应用是给NuxtApp实例提供一些额外的帮助方法，我们可以通过编写一个插件，返回一个对象，在里面设置provide
key，比如：

import { defineNuxtPlugin } from '#app'

export default defineNuxtPlugin(() => {
  return {
    provide: {
      hello: () => 'world'
    }
  }
})

使用这个helper，index.vue：

// 会自动加上$前缀
const { $hello } = useNuxtApp();
console.log($hello())

插件用例：访问Vue实例

如果想要扩展Vue，我们通常要访问Vue实例，引入Vue插件。在nuxt3中可以通过插件访问nuxtApp.vueApp.use(xxx)
做到。

我们引入vue-devui
试一下，前面我们曾经试图自动导入失败了，这里我们手动导入：

npm i vue-devui

创建一个插件vue-devui-plugin.ts：

import { defineNuxtPlugin } from "#app";
import { Button } from "vue-devui";
import 'vue-devui/button/style.css'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(Button);
});

使用组件测试一下：

<d-button>按钮</d-button>

扩展

引入其他组件库尝试结果：

naive-ui按官方方式在SFC中直接使用组件引入就报错，参见：https://github.com/TuSimple/naive-ui/issues/1427又找到了这个回答：https://github.com/TuSimple/naive-ui/issues/636#issuecomment-945990935不过这个解决方案关闭了vite
，不是我喜欢的风格，仅供大家可以参考！

import { NButton } from 'naive-ui'

<n-button>button</n-button>

vant是可以的，不过暂时不知道样式如何按需引入，编写如下插件：可以看一下有赞官方有计划做一个next3+vant的demo

import { defineNuxtPlugin } from "#app";
import { Button } from 'vant';
import 'vant/lib/index.css'
// 这里如果引入 vant/lib/button/index.css是没有效果的
export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(Button)
});