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

[[438473]]

大家好，我是村长，欢迎关注我的公众号村长学前端和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实例提供一些额外的帮助方法，我们可以通过编写一个插件，返回一个对象，在里面设置providekey，比如：

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) 
});

element-plus官方有个starter项目：

https://github.com/element-plus/element-plus-nuxt-starter

只可惜也是全量引入，按需引入没交代，也明确了自动引入暂时支持不了。

我专门录制了Nuxt3从入门到实战系列视频，爱看视频学习的小伙伴不要错过!

https://space.bilibili.com/480140591/channel/seriesdetail?sid=456250

Young村长的个人空间-哔哩哔哩： https://b23.tv/rfg5t64