Apply a glitch effect with the Vue Glitch component


Styling preferences can be very different and with Vue it can be really easy to give a unique look to your elements. Vue Glitch comes in to serve as a component for Vue.js which can be used to apply a glitch effect in any kind of text.

You can see it live here.


To start working with vue-glitch use the following command to install it.

$ yarn add vue-glitch

Import in your project

import Glitch from 'vue-glitch'

Vue.component('glitch', Glitch)

Component Usage:

<glitch text="Glitched"></glitch>

    text="Text appeared to be stuck" color="DeepPink"

<glitch text="Text that looks spooky with custom background" color="Orange" 

To apply custom styles you can use .glitch and .glitch-wrapper classes.

.glitch {
  margin-bottom: 20px;
  padding: 20px;

.glitch-wrapper {
  font-size: 40px;
  font-family: sans-serif;

If you would like to explore more about Vue Glitch, head to the project's repository on GitHub, where you will also find the source code. Created & submitted by @ianaya89.