Open flowen opened 3 years ago
You can put the above in a mixin function and have text
as parameter.
also figured you can do it as easy as this:
<template>
<h1 data-splitting="chars">Split me baby</h1>
</template>
mounted() {
if (typeof window !== `undefined` || typeof document !== `undefined`) {
const Splitting = require("splitting");
Splitting();
}
},
The benefit is, that with JS disabled, the title will still show. With the previous method, it won't.
It does give a warning if you're animating charsMismatching childNodes vs. VNodes:
. So depending on what you do, it can be a dealbreaker.
If someone knows how to fix showing the title in #1 case or knows how to fix the warning, please let me know 🙏
If someone knows how to fix showing the title in #1 case or knows how to fix the warning, please let me know 🙏
Wrapping it in a <client-only>
component should fix the warning.
If you're running Nuxt with Vue 3, we've just created a lite adaptation of Splitting designed for Vue 3 which is fully SSR compatible (that's why we made it)
yo @shshaw & @notoriousb1t just wanted to share my fugly workaround for anyone else in nuxt:
html:
computed:
nuxt.config.js
:splitting.client.js
:last edit with a tip: If you want to style this make sure you've got no
scoped
attribute