Friendly Vue.js props helper tools

#vue #javascript #tools

Friendly vue.js props helps methods which more readable.

use props native way in vue.js

props: {
  name: {
    type: String,
    default: 'foo'
  },
  items:{
    type: Array,
    default: ['foo','bar']
  }
}

It's ok all is working but if vue component have many props and you will define more redundancy code.

props: {
  name: {
    type: String,
    default: 'foo'
  },
  items:{
    type: Array,
    default: ['foo','bar']
  },
  items1:{
    type: Array,
    default: ['foo','bar']
  }
  items2:{
    type: Array,
    default: ['foo','bar']
  }
  items3:{
    type: Array,
    default: ['foo','bar']
  }
}

Emmm looks a little bit more redundancy.

What vprop-types do

// import 
yarn install vprop-types

// import 
import PropsType from 'vprop-types'

// <script>
props: {
  name: PropsType.string.def('foo'),
  items: PropsType.array.def(['foo','bar']),
  items1: PropsType.array.def(['foo','bar']),  
  items2: PropsType.array.def(['foo','bar']),
  kind: PropsType.oneOf(['foo','bar']).def('foo')
}
//