Create global helper / mixin Nuxt 3

Question

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

plugins/swiper.ts

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

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

现在如何在页面或组件文件中调用此方法？还是让它在全球范围内自动导入和访问？

Answer 1

要在页面或组件文件中调用register方法，可以导入Swiper Element bundle，直接调用register方法：

<script>
import { register } from 'swiper/element/bundle';

export default {
  mounted() {
    register();
  }
}
</script>

要在全局范围内自动导入和访问插件，您可以在nuxt.config.js 文件中注册插件：

// nuxt.config.js

export default {
  // ...

  plugins: [
    '~/plugins/swiper.js'
  ],

  // ...
}

然后就可以在任何组件或页面文件中访问register方法，无需导入：

<script>
export default {
  mounted() {
    this.$swiper.register();
  }
}
</script>

请注意，您需要在 register 前加上 $swiper，因为插件将它作为属性添加到 Vue 实例中。

Answer 2

如果您想在 NuxtApp 实例上提供帮助程序，请在提供键下从插件返回它。

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

在另一个文件中你可以使用这个：

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

有关更多详细信息：nuxt3 插件文档.