DEV Community

mixbo
mixbo

Posted on

7 5

Friendly Vue.js props helper 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')
}
//

Looks more readable isn't it.

more info you can found vprop-type

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (0)

SurveyJS custom survey software

JavaScript Form Builder UI Component

Generate dynamic JSON-driven forms directly in your JavaScript app (Angular, React, Vue.js, jQuery) with a fully customizable drag-and-drop form builder. Easily integrate with any backend system and retain full ownership over your data, with no user or form submission limits.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay