Vue Enums

Easily use TypeScript enums in Vue SFC templates

Installation

Install and configure in your main file:

import Vue from 'vue'
import enums from 'vue-enums'

// use enums directly in template
Vue.use(enums)

Alternatively, define enums under a namespace:

// in templates, use {{ $enums.YourEnum }}
Vue.use(enums, { namespace: '$enums'} )

Usage

Define enums:

enum Status {
  accepted = 1,
  declined = 2,
}

export default Status

Use in component:

<template>
  <div v-if="Status.accepted">
    You have been accepted!
  </div>
</template>

<script>
import Status from 'status'

export default {

  enums: {
    Status,
  },

  data () {
    return {
      state: Status.accepted
    }
  }
}
</script>