Vue.js 2 Design Patterns and Best Practices

Configuring property values

We can further configure our property values by instead setting them as an object. This allows us to define things such as defaults, types, validators, and so on. Let's do this with our buttonText property:

export default { props: {  buttonText: {   type: String,   default: "Fancy Button!",   required: true,   validator: value => value.length > 3  } },}

Firstly, we're ensuring that we can only pass String types into this property. We can also check against other types, such as:

• Array
• Boolean
• Function
• Number
• Object
• String
• Symbol

According to web component good practices, sending primitive values to props is a good practice.

Under the hood, this is running the instanceof operator against the property so it could also run ...