CODEWITHSUNDEEP
vue.jseslintvee-validate
Damian
Damian

Reputation: 1720

eslint vee validate no-unused-vars

Using Vee Validate with Vue and am getting the following errors when compiling:

error: 'required' is defined but never used (no-unused-vars)
error: 'max' is defined but never used (no-unused-vars)

My code snippet is below

      <ValidationObserver ref="observer" v-slot="{ invalid }" tag="form" @submit.prevent="submit()">
        <div class="form-group">
          <label for="password">Password</label>
          <ValidationProvider rules="required|max:50" v-slot="{ errors }">
            <input type="password" v-model="password" name="password" class="form-control"/>
            <span>{{ errors[0] }}</span>
          </ValidationProvider>
        </div>
      </ValidationObserver>

<script>
import { ValidationProvider, ValidationObserver } from 'vee-validate'
import { required, max } from 'vee-validate/dist/rules'

export default {
  components: {
    ValidationProvider,
    ValidationObserver
  }
}
</script>

I can suppress the errors by adding this code

Vue.use(required)
Vue.use(max)

But is that the correct way or is there a setting I can use in eslint to prevent these errors?

Upvotes: 0

Views: 1209

Answers (1)

Damian
Damian

Reputation: 1720

Turns out it was quite easy, but I'm still unsure if this is the best way - if someone has a better answer, please post!

/* eslint-disable no-unused-vars */
import { required, max } from 'vee-validate/dist/rules'
/* eslint-enable no-unused-vars */

UPDATE I think the official way is to extend each rule you're using:

extend('required', required)
extend('max', max)

Upvotes: 1

Related Questions