Vue 2 Hero Patterns

This is a simple package to get using Hero Patterns within VueJS.

Available Patterns

  • Jigsaw: jigsaw
  • Overcast: overcast

How to use

First we need to import and initialize

import Vue from 'vue'
import HeroPatterns from 'vue2-heropatterns'

Vue.use(HeroPatterns)

Then in our Vue templates:

<template>
    <vue-hero-pattern
        pattern="anchors_away"
    >
        <p>{{ this.message }}</p>
    </vue-hero-pattern>
</template>
<script>
    export default {
        data () {
            return {
                message: 'A simple message'
            }
        }
    }
</script>

GitHub