Nuxt SplitType
[!NOTE]
This module is currently pre v1, and might have bugs. Please feel free to open an issue if you see a bug!
Nuxt integration for SplitType.
Features
- ⛰ Activate SplitType however you want: directive, component or composable
- 💪 Full Typescript support, including improvements on the original SplitType library.
- ✨ Special
wrapping selector to wrap either lines, words or chars with a special HTML element with defined classes
- 🚠 Callback for SpiltType Proxy
Quick Setup
- Add
nuxt-split-type dependency to your project
# Using pnpm
pnpm add -D nuxt-split-type
# Using yarn
yarn add --dev nuxt-split-type
# Using npm
npm install --save-dev nuxt-split-type
- Add
nuxt-split-type to the modules section of nuxt.config.ts
export default defineNuxtConfig({
modules: [
'nuxt-split-type'
]
})
That's it! You can now use Nuxt SplitType in your Nuxt app ✨
Usage
Composable
<script setup lang="ts">
const pRef = ref<HTMLParagraphElement | null>(null);
const { revert } = useSplitText(pRef, {
splitBy: "lines, words",
onComplete: (instance) => {
console.log("complete", instance);
},
});
useTimeoutFn(async () => {
console.log("revert");
revert();
}, 4000);
</script>
<template>
<p ref="pRef">Nuxt SplitType is the best!</p>
</template>
Component
<template>
<split-text
lines
words
:wrapping="{ wrapType: 'span', wrapClass: 'inline-block', select: 'lines' }"
@complete="(ins) => console.log('done', ins)"
v-slot="{ instance }"
>
Nuxt SplitType is the best!
</split-text>
</template>
Directive
<template>
<p v-split-text="{ splitBy: 'lines, words' }">
Nuxt SplitType is the best!
</p>
</template>
Development
# Install dependencies
npm install
# Generate type stubs
npm run dev:prepare
# Develop with the playground
npm run dev
# Build the playground
npm run dev:build
# Run ESLint
npm run lint
# Run Vitest
npm run test
npm run test:watch
# Release new version
npm run release
