Nuxt3中的useNuxtApp和插件plugins

文章介绍了如何在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>

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值