Validation support for Vuex

Usage no npm install needed!

<script type="module">
  import vuexValidator from '';


VueJS Logo

Vuex Validator
Sponsored by Version Downloads Build Status Dependencies

Vuex Plugin for validation of store values.



Should be installed locally in your project source code:

Installation via JSPM:

jspm install npm:vuex-validator

Alternatively you can also use plain old NPM:

npm install vuex-validator --save


In your main application javascript file:

// app.js

import { VuexValidator } from "vuex-validator";
import validators from "./vuex/validators";
import store from "./vuex/store"; // Inside there should be a Vue.use(Vuex) (see Vuex documentation)

Vue.use(VuexValidator, {

Your validator configurator:

// ./vuex/validators

import testValidator from "./validation/test";

const validators = [ testValidator ];

export default validators;

A sample validator:

// ./vuex/validation/test.js

import { BaseValidator } from "vuex-validator/lib/BaseValidator";

class TestValidator extends BaseValidator {
    constructor() {
        super("test"); // Name of validation are, should correlate with Vuex store module

        this.rule("test-name", ["test", "test2"], this.testName); // Name of rule, All properties that are tested, Test function itself

    testName(state) { // State from Vuex
        if (typeof(state.test) !== "number") {
            this.invalid(["test"], "TEST_NOT_A_NUMBER"); // Failed properties and technical error key as string

        if (typeof(state.test2) !== "string") {
            this.invalid(["test2"], "TEST2_NOT_A_STRING"); // Failed properties and technical error key as string

        if (state.test > 20 && state.test2 === "low number") {
            this.invalid(["test", test2"], "TEST_IS_NO_LOW_NUMBER"); // Failed properties and technical error key as string

        return this.errors(); // Return null if no errors, otherwise array of errors

export default new TestValidator();

A sample state for this could be:

    "test": 123,
    "test2": "a string"


There are two ways to use this validation.

Active validation

To actively validate values you can call


This validates all values of Validator named test-name. It returnes true if all values are valid as defined by your rules in validator test-name. This could be used for backend connection middleware before sending data.

Validation getter in components

Validation getters are added to a component's option object with key validators. This bears analogy to Vuex getters itself mapping global state to component's local state.

export default Vue.extend({

    validators: {
        testInvalid: (validator) => validator.isInvalid("test"),
        test2Invalid: (validator) => validator.isInvalid("test2")

isInvalid takes a property path as string. This is either the property name itself or module name and property name seperated via dot.

"<property name>"
"<module name>.<property name>"

All validator functions are mapped to the component's local computed getters. So it is possible to access validation properties in template:

My property {{test}} is invalid: {{testInvalid}}

A falsy value (undefined, null or false) is returend in case of the property validated through all rules. Otherwise an array of failing rules return values are returned. the return structure can be something like:

    error: "TEST_IS_NO_LOW_NUMBER",
    fields: ["test", "test2"],
    valid: false

fields is an array of properties that are tested against in the failing rule. error is the technical error key defined.


Sebastian Software GmbH Logo

Copyright 2015-2016
Sebastian Software GmbH