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

前言

大家好，从入插件我是实战村长，欢迎关注我的巧用强化器公众号村长学前端和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

源码库