Awesome Open Source
Awesome Open Source

VueCoerceProps Build Status npm package coverage thanks

Transform/Coerce props values to whatever you want


npm install vue-coerce-props

Install the mixin globally or locally:

// main.js
import CoercePropsMixin from 'vue-coerce-props'

// MyComponent.vue
import CoercePropsMixin from 'vue-coerce-props'

export default {
  // other options
  mixins: [CoercePropsMixin],


To coerce a prop, add a coerce function to any prop:

const SpaceTrimmer = {
  props: {
    text: {
      type: String,
      // this function is called by VueCoerceProps
      coerce: text => text.trim(),
    style: {
      type: String,
      coerce(style) {
        // you can access the context as in a computed property
        // NEVER use this.$coerced here as it would create an infinite loop
        // if you use things coming from data, you may consider using
        // a computed property instead
        return this.possibleValues.includes(style) ? style : 'default'

VueCoerceProps will inject a computed property named $coerced containing every single coerced prop:

  <span>Original value: {{ text }}</span>
  <span>Coerced value: {{ $coerced.text }}</span>


  • Q: Why not passing component props as second argument? A: That would make every coerce value depend on every prop. At the end $coerced is just a computed property



Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
javascript (68,779
vue (4,132
utility (209
props (26

Find Open Source By Browsing 7,000 Topics Across 59 Categories