n How to make required props in vuejs | CodimTh

Please Disable Your Browser Adblock Extension for our site and Refresh This Page!

our ads are user friendly, we do not serve popup ads. We serve responsible ads!

Refresh Page
Skip to main content
On . By CodimTh

Not all props are created equal.

Some of them are necessary for the component to work correctly.

Here is an example How to make required props in vuejs:

export default {
  name: 'Camera',
  props: {
  	name: {
      type: String,
      required: true,
  	img: {
      type: String,
  	rating: {
      type: Number,

Here we set our name prop to be required by adding required: true to its prop definition.

By default props are not required, so we don't need to touch the other ones. We could add required: false if we wanted to.


Example 2:

Vue.component('my-component', {
  props: {
    // Basic type check (`null` and `undefined` values will pass any type validation)
    propA: Number,
    // Multiple possible types
    propB: [String, Number],
    // Required string
    propC: {
      type: String,
      required: true
    // Number with a default value
    propD: {
      type: Number,
      default: 100
    // Object with a default value
    propE: {
      type: Object,
      // Object or array defaults must be returned from
      // a factory function
      default: function () {
        return { message: 'hello' }
    // Custom validator function
    propF: {
      validator: function (value) {
        // The value must match one of these strings
        return ['success', 'warning', 'danger'].indexOf(value) !== -1

Riadh Rahmi

Senior Web Developer PHP/Drupal & Laravel

I am a senior web developer, I have experience in planning and developing large scale dynamic web solutions especially in Drupal & Laravel.

Web Posts


Page Facebook