-
-
Notifications
You must be signed in to change notification settings - Fork 7
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Nuxt usage exemple #40
Comments
Hey @mrleblanc101, sorry for the late reply.. I'm looking into this rn |
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... |
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 |
Is your feature request related to a problem? Please describe.
Currently, when using the Vue exemple in a Nuxt project, I get this error:
I don't understand why it says the server render
jos jos-grow
since clearly I created aclient-only
pluginjos-animation.client.js
: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:
The text was updated successfully, but these errors were encountered: