nuxtjs with simple-vue-validator as plugin

Question

I am new to Vue and Nuxt and I am building simple forms with simple-vue-validator for validating the form before I submit it to the back-end. I did follow the Nuxtjs plugin's documentation but I am getting some errors 😞

The error I am getting is TypeError: Cannot read property 'Validator' of undefined.
I can't find any $SimpleValidator on this. Not sure if I did something wrong or forgot something, but I keep reading the documentation and this is all I understand. Thanks in advance.

./plugins/simple-validator.js

import Vue from 'vue'
import SimpleValidator from 'simple-vue-validator'
Vue.use(SimpleValidator)

./nuxt.config.js

export default {
  ...
  plugins: [
    { src: '@/plugins/simple-validator.js', ssr: true }
  ],
  ...
}

./pages/index.vue*

<template>
  <form>
    <div class="field-holder">
      first name *
      <input type="text" v-model="formValues.firstName" :value="formValues.firstName" />
      <span v-if="validation.hasError('firstName')">
        {{ validation.firstError('firstName') }}
      </span>
    </div>
    <div class="field-holder">
      middle name
      <input type="text" v-model="formValues.middleName" :value="formValues.middleName" />
    </div>
    <div class="field-holder">
      last name *
      <input type="text" v-model="formValues.lastName" :value="formValues.lastName" />
      <span v-if="validation.hasError('lastName')">
        {{ validation.firstError('lastName') }}
      </span>
    </div>
    <button @click="submit">Submit</button>
  </form>
</template>

<script>
export default {
  data () {
    formValues: {
      firstName: '',
      middleName: '',
      lastName: ''
    }
  },
  validators: {
    'formValues.firstName' (value) {
      return this.$SimpleValidator.Validator.value(value).required()
    },
    'formValues.lastName' (value) {
      return this.$SimpleValidator.Validator.value(value).required()
    }
  },
  methods: {
    submit (event) {
      event.preventDefault()
      this.$validate()
        .then(function (success) {
          if (success) {
            console.log('Validation succeeded!')
          }
        })
    }
  }
}
</script>

Answer 1

I fixed my issue! 🎊

We just need to add import { Validator } from 'simple-vue-validator' to the component that requires it. So the updated component will look like this:

./pages/index.vue

<template>
  <form>
    <div class="field-holder">
      first name *
      <input type="text" v-model="formValues.firstName" :value="formValues.firstName" />
      <span v-if="validation.hasError('firstName')">
        {{ validation.firstError('firstName') }}
      </span>
    </div>
    <div class="field-holder">
      middle name
      <input type="text" v-model="formValues.middleName" :value="formValues.middleName" />
    </div>
    <div class="field-holder">
      last name *
      <input type="text" v-model="formValues.lastName" :value="formValues.lastName" />
      <span v-if="validation.hasError('lastName')">
        {{ validation.firstError('lastName') }}
      </span>
    </div>
    <button @click="submit">Submit</button>
  </form>
</template>

<script>
import { Validator } from 'simple-vue-validator'

export default {
  data () {
    formValues: {
      firstName: '',
      middleName: '',
      lastName: ''
    }
  },
  validators: {
    'formValues.firstName' (value) {
      return Validator.value(value).required()
    },
    'formValues.lastName' (value) {
      return Validator.value(value).required()
    }
  },
  methods: {
    submit (event) {
      event.preventDefault()
      this.$validate()
        .then(function (success) {
          if (success) {
            console.log('Validation succeeded!')
          }
        })
    }
  }
}
</script>