<commit_before># vue-types

> Prop type definitions for [Vue.js](http://vuejs.org). Compatible with both Vue 1.x and 2.x


<!-- TOC depthTo:3 -->

- [Introduction](#introduction)
    - [When to use](#when-to-use)
- [Installation](#installation)
    - [NPM package](#npm-package)
    - [CDN delivered `<script>`](#cdn-delivered-script)
- [Usage with [eslint-plugin-vue](https://github.com/vuejs/eslint-plugin-vue)](#usage-with-eslint-plugin-vuehttpsgithubcomvuejseslint-plugin-vue)
- [Production build](#production-build)
    - [Webpack](#webpack)
    - [Rollup](#rollup)
- [Documentation](#documentation)
    - [Native Types](#native-types)
    - [Native Types Configuration](#native-types-configuration)
    - [Custom Types](#custom-types)
    - [Utilities](#utilities)
- [License](#license)

<!-- /TOC -->

## Introduction

`vue-types` is a collection of configurable [prop type](http://vuejs.org/guide/components.html#Props) definitions for Vue.js components, inspired by React's `prop-types`.

### When to use

While basic prop type definition in Vue is simple and convenient, detailed prop validation can become verbose on complex components.
This is the case for `vue-types`.

Instead of:

```js
export default {
  props: {
    id: {
      type: Number,
      default: 10
    },
    name: {
      type: String,
      required: true
    },
    age: {
      type: Number,
      validator(value) {
        return Number.isInteger(value)
      }
    },
    nationality: String
  },
  methods: {
    // ...
  }
};
```

You may write:

```js

import VueTypes from 'vue-types';

export default {
  props: {
    id: VueTypes.number.def(10),
    name: VueTypes.string.isRequired,
    age: VueTypes.integer,
    // No need for `default` or `required` key, so keep it simple
    nationality: String
  },
  methods: {
    // ...
  }
}
```


## Installation

### NPM package

``` bash
npm install vue-types --save
# or
yarn add vue-types
```

### CDN delivered `<script>`

add the following script tags before your code
```html
<script src="https://unpkg.com/vue-types"></script>
```

## Usage with [eslint-plugin-vue](https://github.com/vuejs/eslint-plugin-vue)

When used in a project with [eslint-plugin-vue](https://github.com/vuejs/eslint-plugin-vue), the linter might report errors related to the `vue/require-default-prop` rule.

To prevent that error use [eslint-plugin-vue-types](https://github.com/dwightjack/eslint-plugin-vue-types)

## Production build

Vue.js does not validate components' props when used in a production build. If you're using a bundler such as Webpack or rollup you can shrink vue-types filesize by removing the validation logic while preserving the library's API methods. To achieve that result setup an alias to `vue-types/es/shim.js` (`vue-types/dist/shim.js` if you're using CommonJS modules).

### Webpack

The following example will shim the module in Webpack by adding an [alias field](https://webpack.js.org/configuration/resolve/#resolve-alias) to the configuration when `NODE_ENV` is set to `"production"`:

```js
// webpack.config.js

return {
  // ... configuration
  resolve: {
    alias: {
      'vue-types': process.env.NODE_ENV === 'production' ? 'vue-types/es/shim.js' : undefined
    }
  }
}
```

### Rollup

The following example will shim the module in rollup using [rollup-plugin-alias](https://github.com/rollup/rollup-plugin-alias) when `NODE_ENV` is set to `"production"`:

```js<commit_msg>fix TOC<commit_after># vue-types

> Prop type definitions for [Vue.js](http://vuejs.org). Compatible with both Vue 1.x and 2.x


<!-- TOC depthTo:3 -->

- [Introduction](#introduction)
    - [When to use](#when-to-use)
- [Installation](#installation)
    - [NPM package](#npm-package)
    - [CDN delivered `<script>`](#cdn-delivered-script)
- [Usage with `eslint-plugin-vue`](#usage-with-eslint-plugin-vue)
- [Production build](#production-build)
    - [Webpack](#webpack)
    - [Rollup](#rollup)
- [Documentation](#documentation)
    - [Native Types](#native-types)
    - [Native Types Configuration](#native-types-configuration)
    - [Custom Types](#custom-types)
    - [Utilities](#utilities)
- [License](#license)

<!-- /TOC -->

## Introduction

`vue-types` is a collection of configurable [prop type](http://vuejs.org/guide/components.html#Props) definitions for Vue.js components, inspired by React's `prop-types`.

### When to use

While basic prop type definition in Vue is simple and convenient, detailed prop validation can become verbose on complex components.
This is the case for `vue-types`.

Instead of:

```js
export default {
  props: {
    id: {
      type: Number,
      default: 10
    },
    name: {
      type: String,
      required: true
    },
    age: {
      type: Number,
      validator(value) {
        return Number.isInteger(value)
      }
    },
    nationality: String
  },
  methods: {
    // ...
  }
};
```

You may write:

```js

import VueTypes from 'vue-types';

export default {
  props: {
    id: VueTypes.number.def(10),
    name: VueTypes.string.isRequired,
    age: VueTypes.integer,
    // No need for `default` or `required` key, so keep it simple
    nationality: String
  },
  methods: {
    // ...
  }
}
```


## Installation

### NPM package

``` bash
npm install vue-types --save
# or
yarn add vue-types
```

### CDN delivered `<script>`

add the following script tags before your code
```html
<script src="https://unpkg.com/vue-types"></script>
```

## Usage with `eslint-plugin-vue`

When used in a project with [eslint-plugin-vue](https://github.com/vuejs/eslint-plugin-vue), the linter might report errors related to the `vue/require-default-prop` rule.

To prevent that error use [eslint-plugin-vue-types](https://github.com/dwightjack/eslint-plugin-vue-types)

## Production build

Vue.js does not validate components' props when used in a production build. If you're using a bundler such as Webpack or rollup you can shrink vue-types filesize by removing the validation logic while preserving the library's API methods. To achieve that result setup an alias to `vue-types/es/shim.js` (`vue-types/dist/shim.js` if you're using CommonJS modules).

### Webpack

The following example will shim the module in Webpack by adding an [alias field](https://webpack.js.org/configuration/resolve/#resolve-alias) to the configuration when `NODE_ENV` is set to `"production"`:

```js
// webpack.config.js

return {
  // ... configuration
  resolve: {
    alias: {
      'vue-types': process.env.NODE_ENV === 'production' ? 'vue-types/es/shim.js' : undefined
    }
  }
}
```

### Rollup

The following example will shim the module in rollup using [rollup-plugin-alias](https://github.com/rollup/rollup-plugin-alias) when `NODE_ENV` is set to `"production"`:

```js
{'fraction_non_alphanumeric': 0.1451851851851852, 'fraction_numerical': 0.002074074074074074, 'mean_word_length': 3.435611038107753, 'pattern_counts': {'":': 0, '<': 15, '<?xml version=': 0, '>': 17, 'https://': 12, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '436864', 'n_tokens_mistral': 2230, 'n_tokens_neox': 2120, 'n_words': 614}