Note: This is still under development.

vue-props-template

Write vue's props through template literal.

const pt = require('vue-props-template')
const UserItem = {
  template: '<li>{{name}} is {{age}} years old.</li>',
  props: pt`
    required string name = ${'Anonymous'}
    number age
  `
}

About Props

Check the original documents.

• Components - vue.js > Props > Prop Validation

Installation

$ npm install -S https://ginpei.github.io/vue-props-template/

const pt = require('vue-props-template')

pt or whatever you want.

Usage

Basic Types

const MyComponent = {
  props: pt`
    string simpleString
    number simpleNumber
    boolean simpleBoolean
    function simpleFunction
    object simpleObject
    array simpleArray
  `
}

It makes:

const MyComponent = {
  props: {
    simpleString: { type: String },
    simpleNumber: { type: Number },
    simpleBoolean: { type: Boolean },
    simpleFunction: { type: Function },
    simpleObject: { type: Object },
    simpleArray: { type: Array }
  }
}

Required

const MyComponent = {
  props: pt`
    required string requiredProp
  `
}

It makes:

const MyComponent = {
  props: {
    requiredProp: { type: String, required: true }
  }
}

Default

You need to use interporations.

const MyComponent = {
  props: pt`
    string defaultString = ${'foo-bar'}
    array defaultArray = ${[11, 22, 33]}
  `
}

It makes:

const MyComponent = {
  props: {
    defaultString: { type: String, defualt: 'foo-bar' },
    defaultArray: { type: Array, default: [11, 22, 33] }
  }
}

Values inside template string, e.g. string foo = 123, don't work.

Validator

You need to use extend(). Ewww.

props = pt.extend(pt`
  string extendedString
`, {
  extendedString: {
    validator: function (value) {
      return value.startsWith('ok-')
    },
    whatever: 'whatever'
  }
})

It makes:

props = {
  extendedString: {
    type: String,
    validator: function (value) {
      return value.startsWith('ok-')
    },
    whatever: 'whatever'
  }
}

This syntax may be changed...

History

• Not released yet.

License

• MIT License

Contact

• by Ginpei
• GitHub: ginpei/vue-props-template
• Twitter: @ginpei_en 🇨🇦 or @ginpei_jp 🇯🇵