Nail Polishing Minions

    TypeScript icon, indicating that this package has built-in type declarations

    1.2.2 • Public • Published

    Glitched Writer Vue Component

    npm npm type definitions NPM


    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 <<< | >>> EXAMPLES <<< | >>> VUE DEMO <<< | >>> JS Module <<<


    Download and install with npm. Works for both Vue 2 and Vue 3!

    npm i vue-glitched-writer

    Import inside the script tag.

    import GlitchedWriter from 'vue-glitched-writer'

    Or use Skypack to import without installing the package.

    import GlitchedWriter from ''


    Declare component

    	export default {
    		components: {

    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" />

    Queue Writing

    If you want to write texts for prepared array, then you can pass that array to as text and glitched writer will turn it into a working queue.

    data() {
       return {
          phrases: [
    				'Hello and Welcome',
    				'What is this?!',
    				'It appears i\'m in some queue...',
    <glitched-writer :text="phrases" />
    <!-- add prop "queue" to controll the queue -->
          interval: 1200, // [ms]
          loop: true
          // false -> stop (default)
          // true -> continue looping
          // Function -> stop and fire the function.
          // Number -> wait number ms and continue looping

    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: {
             // RIGHT
             this.options = {
                steps: [2, 15],
                html: false,
             // 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 3 events:

    • start - when writer starts writing
    • step - on every step of writing process
    • finish - when writer finishes writing
    <glitched-writer @start="method" @step="callback" @finish="callback" />
       methods: {
          callback(text, data){
             console.log(text, data.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" />

    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.


    npm i vue-glitched-writer

    DownloadsWeekly Downloads






    Unpacked Size

    179 kB

    Total Files


    Last publish


    • thetarnav.