vue-shorthand-props v1.0.5

vue-props

Main goal is to provide shorthands to create Vue.js props.

Installation

npm install vue-shorthand-props

How to use?

Two types of functions are available: 1. Required: can be used to create a required prop, 2. Default: can be used to create a default prop.

Both can be extended with Vue.js prop options.

Example

Let's say you need to create a prop with type of String and required property equals true.

In Vue.js you can do this like below:

props: {
  sample: {
    type: String,
    required: true
  }
}

With shorthand, you can do this even simpler:

props: {
  sample: RequiredString()
}

That was for required prop. What if you want to create a prop with default value?

Vue.js style:

props: {
  sample: {
    type: Number,
    default: 0 
  }
}

Shorthand style:

props: {
  sample: DefaultNumber() // default value for number is 0.
}

It is that simple. To create a required prop you can call RequiredType function. To create a prop with default value you can call DefaultType function.

Ok but what if I want to provide option like validator?

Vue.js style:

props: {
  sample: {
    type: String,
    required: true,
    validator(value) {
      return value.length > 0;
    } 
  }
}

Shorthand style:

props: {
  sample: RequiredString({
    validator(value) {
      return value.length > 0;
    } 
  })
}

Quite similar but you can omit type and required.

Can I do the same with all the available types?

Yes, you can. Every type has the same pair of functions: RequiredType, DefaultType.

• String: RequiredString() and DefaultString(). Default value is empty string.
• Number : RequiredNumber() and DefaultNumber(). Default value is 0.
• Boolean: RequiredBoolean() and DefaultBoolean(). Default value is false.
• Date: RequiredDate() and DefaultDate(). Default value is new Date().
• Array: RequiredArray() and DefaultArray(). Default value is empty array.
• Object: RequiredObject() and DefaultObject(). Default value is empty object.
• Function: RequiredFunction() and DefaultFunction(() => true). There is no default value. You have to provide it by yourself as first argument.

Your own default value

Every type has default value. What if I want to provide my own default value?

props: {
    /** String prop with default value. */
    sampleString: DefaultString('my own default value'),

    /** Number prop with default value. */
    sampleNumber: DefaultNumber(100),
    
    /** Boolean prop with default value. */
    sampleBoolean: DefaultBoolean(true),

    /** Date prop with default value. */
    sampleDate: DefaultDate(new Date('2020-01-10')),
    
    /** Array prop with default value. */
    sampleArray: DefaultArray([ 1, 2, 3 ]),
    
    /** Object prop with default value. */
    sampleObject: DefaultObject({ value: 'object value' }),

    /** Function prop with default value. */
    sampleFunction: DefaultFunction((value) => value > 10)
}

TypeScript support

Every function is generic and for arrays, object and functions you can go even further.

interface Person { name: string; };
type Validator = (value: string) => boolean;


props: {
    // Object example
    person: RequiredObject<Person>(),

    // Array example
    people: RequiredArray<Person>(),

    // Function example
    validator: DefaultFunction<Validator>((value) => value.length > 0)
}