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.

• ✨  Release Notes
• 🏀 Online playground
• 📖  Documentation

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

1. 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

2. 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