Glitched Writer Vue Component

What is Glitched Writer:

A lightweight npm module for writing text to HTML elements. Highly customizable settings. Decoding, decrypting, scrambling, and simply spelling out text.

Vue component

This is a Vue.js Single File Component, serving as a wrapper for Glitched Writer to simplify it's usage in Vue.

>>> PLAYGROUND <<< | >>> DEMOS <<< | >>> NPM <<< | >>> JS Module <<<

Installation

Download and install with npm.

npm i vue-glitched-writer

For Vue 3:

npm i vue-glitched-writer@next

Import inside the script tag.

import GlitchedWriter from 'vue-glitched-writer'

Or use Skypack to import without need to install the package.

import GlitchedWriter from 'https://cdn.skypack.dev/vue-glitched-writer'

Usage:

Declare component

<script>
    export default {
        components: {
            GlitchedWriter,
        },
    }
</script>

Animate text instantly after load

Will animate blank -> passed text property

<glitched-writer text="Your Content" appear />

Write text dynamically

Animate each time the txt prop changes. Previous text -> new text

<glitched-writer :text="text" />

Using Presets

List of available presets.

<glitched-writer text="Your Text" preset="zalgo" />

<!-- Passing options prop will extend the preset -->
<glitched-writer text="Your Text" preset="zalgo" :options="{ html: true }" />

Custom Options

See Glitched Writer's Option List.

Passing options object to component.

{
   data() {
      return {
         text: 'Your Text',
         options: {
            html: true,
            letterize: true,
            steps: [0, 10],
            delay: [500, 2000],
            glyphs: 'QWERTYUIOPASDFGHJKLZXCVBNM!@#$%^&*()1234567890'
         },
      }
   },
}

<glitched-writer :text="text" :options="options" />

Changing options later

When changing options object (passed to the component), you need to remember to reassign the object property, instead of modifying it.

{
   methods: {
      changeOprions(){
         // RIGHT
         this.options = {
            steps: [2, 15],
            html: false,

            ...this.options
            // destructure previous options to extend it
         }

         // WRONG: this.options.steps = [2, 15]
      }
   }
}

Pausing the animation

The "pause" boolean property is responsible for programatic pausing. Simply set "pause" property to true if you want the animation to stop.

data() {
   return {
      pause: true
   }
}

<glitched-writer :text="text" :pause="pause" />

Component Events

Glitched Writer emits event on every step and writing finish.

<glitched-writer :text="text" @step="method" @finish="method" />

{
   methods: {
      method(currentString: string, writerData: WriterDataResponse){
         console.log(currentString, writerData.options)
      }
   }
}

// WriterDataResponse: {
// 	string: string
// 	writer: GlitchedWriter
// 	options: Options
// 	state: State
// 	status?: 'ERROR' | 'SUCCESS'
// 	message?: string
// 	error?: any
// }

Accessing GlitchedWriter Instance

If you want to do something custom with the component, you can use GlitchedWriter class instance attached to the html element.

<glitched-writer :text="text" ref="el" />

mounted(){
   console.log(this.$refs.el.$writer)
}

More Information

If you are curious about further customization of animation effect and behavior, then please visit the original Glitched Writer Readme. There you'll find description of every option and some use cases.