Installation ​

NPM package ​

npm install vue-types --save

CDN delivered script ​

Add the following script tags before your code

<script src="https://unpkg.com/vue-types@5"></script>

<!-- Or -->

<script src="https://cdn.jsdelivr.net/npm/vue-types@5/dist/vue-types.umd.js"></script>

In modern browsers supporting ES Modules you can import the library like this:

<script type="module">
  import { string, number } from 'https://unpkg.com/vue-types@5?module'
</script>

<!-- Or -->

<script type="module">
  import { string, number } from 'https://cdn.jsdelivr.net/npm/vue-types@5/+esm'
</script>

Usage with bundlers ​

Starting from version 4, VueTypes is published as a native ESM module with CommonJS and UMD support.

Modern bundlers and tools should be able to automatically pick the correct entry point based on your configuration.

import { string, oneOf } from 'vue-types' // or: import VueTypes from '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 VueTypes file size by around 70% (minified and gzipped) by removing the validation logic while preserving the library's API methods. To achieve that result, VueTypes ships with a vue-types/shim module that can be used as alias in production builds.

By just aliasing vue-types to vue-types/shim, bundlers should be able to pick the module type that fits your configuration (ES, CommonJS, ...).

See below for common configuration scenarios.

CDN usage ​

If you're including the library via a script tag, use the dedicated shim build file:

<script src="https://unpkg.com/vue-types@5/shim/index.umd.js"></script>

Vite ​

You can use the conditional config feature to set a production-only alias:

// vite.config.js

export default function ({ mode }) {
  return {
    // ... other config settings
    resolve: {
      ...(mode === 'production' && {
        alias: {
          'vue-types': 'vue-types/shim',
        },
      }),
    },
  }
}

Webpack ​

The following example will shim the module in Webpack by adding an alias field to the configuration when NODE_ENV is set to "production":

// webpack.config.js

return {
  // ... configuration
  resolve: {
    alias: {
      // ... other aliases
      ...(process.env.NODE_ENV === 'production' && {
        'vue-types': 'vue-types/shim',
      }),
    },
  },
}

Rollup ​

The following example will shim the module in rollup using @rollup/plugin-alias:

// rollup.config.js
import alias from '@rollup/plugin-alias'

return {
  // ... configuration
  plugins: [
    alias({
      entries: {
        'vue-types': 'vue-types/shim',
      },
    }),
    // ...other plugins
  ],
}

Nuxt ​

VueTypes provides a Nuxt module that will automatically enable the shim for production builds:

npm install vue-types-nuxt --save-dev

// nuxt.config.ts

export default {
  // ...
  modules: ['vue-types-nuxt'],
}

// nuxt.config.js

export default {
  // ...
  buildModules: ['vue-types-nuxt'],
}

The modules accepts a shim boolean option to forcefully enable / disable the shim:

// nuxt.config.ts

export default {
  modules: ['vue-types-nuxt'],

  // use the shim even during development
  vueTypes: {
    shim: true,
  },
}