vue.js 创建全局助手/混合Nuxt 3

pkwftd7m  于 2023-04-21  发布在  Vue.js
关注(0)|答案(1)|浏览(194)

我在一个nuxt 3项目中使用Swiper Element,想创建一个全局插件并调用register()。我似乎无法让它工作。这在Nuxt 2中曾经很容易。

plugins/swiper.ts

import { register } from 'swiper/element/bundle';

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

现在,我如何在页面或组件文件中调用这个方法?或者让它自动导入并全局访问?

yx2lnoni

yx2lnoni1#

如果你想在NuxtApp示例上提供一个helper,请在provide键下从插件返回它。

export default defineNuxtPlugin((nuxtApp) => {
    return {
          provide: {
               register: register
          }
    }
})

在另一个文件中,您可以使用以下命令:

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

更多详情:nuxt3插件文档。

相关问题