@miii/vue-lettering

@miii/vue-lettering

Web typography tool for Vue to split text into pieces for CSS selection with ease.

The plugin adds a v-lettering directive which can be used to create groups of (individual) letters using span or tag of your choice.

Inspired by Lettering.js.

🚀 Features

• Typescript ready
• SSR ready
• Supports nested splits
• Nuxt module included

📦 Install

$ yarn add @miii/vue-lettering

Add to your app:

import Vue from 'vue'
import VueLettering from '@miii/vue-lettering'

Vue.use(VueLettering, {
  // Optional plugin options
})

const app = new Vue({
  // ...
})

🚀 Usage

In your template:

<h1 v-lettering>Foo</h1>

Rendered output:

<h1 aria-label="Foo">
  <span class="vl__g vl--i-1" aria-hidden="true">F</span>
  <span class="vl__g vl--i-2" aria-hidden="true">o</span>
  <span class="vl__g vl--i-3" aria-hidden="true">o</span>
</h1>

Read the full documentation here.

🔉 Accessibility

This plugin uses the WAI-ARIA guidelines on the injected elements to make them accessibile to users with screenreaders.

❗️ Issues

If you have any feedback or suggestions, please feel free to write an issue or PR.