Nuxt3中的useNuxtApp和插件plugins

疆~

已于 2023-04-10 13:38:11 修改

阅读量2.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： nuxt 文章标签：前端

于 2023-04-10 10:54:12 首次发布

本文链接：https://blog.youkuaiyun.com/qq_40323256/article/details/130055024

nuxt 专栏收录该内容

16 篇文章

订阅专栏

文章介绍了如何在Nuxt.js应用中使用useNuxtApp钩子来创建和扩展插件。通过nuxtApp的provide方法，可以在所有组合式API和组件中注入并访问服务，如示例所示，在pages中调用$hello方法。同时展示了在plugins目录中定义插件的方式，以及如何在不同页面中使用这些提供的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

useNuxtApp

nuxtApp是一个运行时的上下文，可以通过插件（plugins）来扩展它。使用provide方法就可以创建nuxt 插件，指定name，就可以在所有的组合式API和组件中通过name来调用value指定对象。
示例:

pages/index.vue:

<template>
  <div>
    {{ nuxtApp.$hello("你好啊") }}
  </div>
</template>

<script lang="ts" setup>
const nuxtApp = useNuxtApp();
nuxtApp.provide("hello", (msg: String) => `Hello ${msg}!`);
</script>

plugins

插件plugins目录，插件可以全局使用

plugins/index.ts:

export default defineNuxtPlugin(() => {
    return {
        provide: {
            hello: (msg: String) => {
                return `hello ${msg}!`;
            }
        }
    };
});

pages/index.ts:

<template>
  <div>
    {{ $hello("world") }}
  </div>
</template>
 
<script lang="ts" setup>
const { $hello } = useNuxtApp();
</script>