I would like to integrate flexmonster with NuxtJS 3

Hello, Teeraphong!

Thank you for writing to us.

The error "Windows is not defined" in Nuxt and other frameworks typically occurs because window is a browser-specific global object that is not available during server-side rendering. Flexmonster relies on the window object, hence it cannot be rendered on the server. To render Flexmonster on a client side, please follow the following steps:

• Define Flexmonster plugin inside the "/plugins" folder of your project:

import Pivot from "vue-flexmonster/vue3";
import "flexmonster/flexmonster.css";


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

• Import the Flexmonster plugin in the "nuxt.config.ts" file:

  plugins: [{ src: '~/plugins/flexmonster.client.js', mode: 'client' }]

• When using the <Pivot> component, wrap it in the <ClientOnly> component to ensure that it is rendered on the client side.

<ClientOnly>
    <Pivot
     ref="pivot"
     toolbar
    />
</ClientOnly>

For more information about Flexmonster integration with Vue, please see our documentation: https://www.flexmonster.com/doc/integration-with-vue-3/

Please let us know if any further questions arise.

Best Regards,
Maksym

Hello, Teeraphong!

Hope you are doing well.
We would like to know if you were able to integrate Flexmonster with Nuxt.
Please let us know if any further questions arise or if further help with the integration is needed.

Best Regards,
Maksym