A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://vue-types.codeful.dev/ below:

Website Navigation


Introduction | VueTypes

VueTypes

VueTypes is a collection of configurable prop validators for Vue.js inspired by React prop-types.

Try it now!

VERSION NOTE

Starting from v6, vue-types is ONLY compatible with vue@3.

This is the documentation for VueTypes 6 and above. If you are using an older version, refer to the following links:

When to use

While basic prop validation in Vue.js is straightforward and convenient, fine-grained validation can become verbose for complex components.

VueTypes offers a compact and fluent interface to define your project's props.

Usage example

Imagine a typical Vue.js component with a set of props:

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

While this component works perfectly fine, writing a lot of prop validation objects can become repetitive.

With VueTypes, you could rewrite the same props like this:

ts
import { number, string, integer } from 'vue-types'

export default defineComponent({
  props: {
    id: number().def(10),
    name: string().isRequired,
    age: integer().def(0),
    nationality: string(),
  },
  methods: {
    // ...
  },
})

VueTypes provides validators in a single namespace entry point as well:

js
import VueTypes from 'vue-types'

export default {
  props: {
    id: VueTypes.number.def(10),
    name: VueTypes.string.isRequired,
    age: VueTypes.integer,
    nationality: VueTypes.string,
  },
  methods: {
    // ...
  },
}

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4