Nuxt Compatibility

[g-tejas]

I'm trying to get it to work with Nuxt-rc6 and vue3 but im running into "ReferenceError: document is not defined" errors.

<template>
  <div>
      <VueWinBox></VueWinBox>
  </div>
</template>

<script setup>
import VueWinBox from 'vue-winbox';
const winboxRef = ref();

const options = {
  title: "Test",
  class: "Test2",
};
</script>

I'm guessing i need to import it as a plugin, but im not sure how to, would appreciate if someone could guide me, tysm in advance!

[wobsoriano]

You can create a winbox plugin in Nuxt and set it as client only.

Inside plugins/winbox.client.ts, you'll do:

import { VueWinBox } from 'vue-winbox'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component('VueWinBox', VueWinBox)
})

Then use it anywhere in your app

<template>
  <div>
      <VueWinBox></VueWinBox>
  </div>
</template>

<script setup>
const winboxRef = ref();

const options = {
  title: "Test",
  class: "Test2",
};
</script>