Nuxt usage exemple

[mrleblanc101]

Is your feature request related to a problem? Please describe.
Currently, when using the Vue exemple in a Nuxt project, I get this error:

Hydration class mismatch on <li class=​"jos jos-grow" data-v-inspector=​"pages/​index.vue:​48:​21" data-v-02281a80 data-jos_once=​"false" data-jos_animation=​"grow" data-jos_timingfunction=​"ease-in-out" data-jos_duration=​"0.4" data-jos_counter=​"0">​…​​

• rendered on server: class="jos jos-grow"
• expected on client: class="jos"
  Note: this mismatch is check-only. The DOM will not be rectified in production due to performance overhead.

I don't understand why it says the server render jos jos-grow since clearly I created a client-only plugin jos-animation.client.js:

import JOS from "jos-animation";

export default defineNuxtPlugin(() => {
    console.log('client', process.client)
    console.log('server', process.server)
    JOS.init({
        animation: "grow",
        duration: 0.4,
        rootMargin: "10% 0% 40% 0%",
        debugMode: true,
    });
});

Describe the solution you'd like
It would be nice to have a Nuxt exemple, since there is a Next exemple.

Describe alternatives you've considered
I made a custom plugin, and I was able to bypass the virtual DOM error.
But I'm not 100% sure this is correct:

// plugins/jos-animation.client.js
import JOS from 'jos-animation/dist/jos.js';

export default defineNuxtPlugin((nuxtApp) => {
    const router = useRouter();
    JOS.init({
        passive: true,
        animation: 'fade',
        duration: 0.4,
        rootMargin: '20% 0% 30% 0%',
    });
    nuxtApp.vueApp.directive('jos', {
        mounted(el) {
            el.classList.add('jos');
            JOS.refresh();
        },
    });
    watch(
        () => router.currentRoute.value,
        () => {
            nextTick(() => {
                JOS.refresh();
            });
        }
    );
});

// plugins/jos-animation.server.js
export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.directive('jos', {});
});

// pages/index.vue
<ul class="projects-list">
    <li v-jos v-for="projet in projets">
      ...
    </li>
</ul>

[jesvijonathan]

Hey @mrleblanc101, sorry for the late reply.. I'm looking into this rn

[jesvijonathan]

Hello @mrleblanc101,

<script>
import { watch, nextTick } from "vue";
import JOS from "jos-animation";

export default {
  data() {
    return {
      message: "This is the home page",
    };
  },
  mounted() {
    JOS.init({
      passive: true,
      animation: "fade",
      duration: 0.4,
      rootMargin: "20% 0% 30% 0%",
    });
    watch(
      () => this.$route,
      () => {
        nextTick(() => {
          JOS.refresh();
        });
      }
    );
  },
};
</script>

This snippet alone seems to work with Nuxt.js, very similar to how it works in Vue3.js.

About Hyderation class mismatch, you might have to force hard-refresh the site or restart the dev server...

[mrleblanc101]

Yeah I've put this code in a Client plugin so it run on every page but I get hydration errors. Which is odd since it runs only on the client side. If I wrap my div using class="jos" in a <ClientOnly> it fix the hydration error, but now the init won't work because the div is not mounted and nextTick() won't suffice. So I added a 100ms timeout, but that's incredibly ugly.