How to use wowjs in nuxt 3? | Nuxt | Page 1

#

Hi @delicate relic. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

To use WOW.js in Nuxt 3, you'll need to create a client-side plugin and properly initialize it. However, the knowledge sources provided don't contain specific information about integrating WOW.js with Nuxt 3. Instead, I can offer some general guidance based on how Nuxt 3 handles plugins and third-party libraries.

Here's a general approach you could try:

Create a plugin file plugins/wow.client.ts:

import { WOW } from 'wowjs';

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use({
    install(app) {
      app.config.globalProperties.$wow = new WOW({
        live: false
      });
    }
  });
});

Make sure to wrap any WOW.js initialization or usage in a onMounted hook or inside a <ClientOnly> component, as WOW.js requires the DOM to be available:

<template>
  <ClientOnly>
    <div class="wow fadeIn">
      <!-- Your animated content -->
    </div>
  </ClientOnly>
</template>

<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  if (process.client) {
    const { $wow } = useNuxtApp()
    $wow.init()
  }
})
</script>

If you're still experiencing issues, it might be related to how Nuxt 3 handles ESM imports or client-side only libraries. You might need to add WOW.js to the build.transpile array in your nuxt.config.ts file, as mentioned in the Nuxt 3 ESM documentation (https://nuxt.com/docs/guide/concepts/esm#troubleshooting-esm-issues):

export default defineNuxtConfig({
  build: {
    transpile: ['wowjs']
  }
})

#

If these steps don't resolve your issue, you might need to provide more specific details about the problem you're encountering. Additionally, you could consider using a Vue 3 compatible animation library that's easier to integrate with Nuxt 3, or check the official Nuxt documentation for the most up-to-date information on integrating third-party libraries.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@delicate relic Kapa.ai is still learning and improving, please let me know how I did by reacting below.

#How to use wowjs in nuxt 3?

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: