Vue custom element error with vee-validate ValidationObserver component

Question

I'm trying to use vee-validate to validate some inputs on this app. When trying to use the ValidationObserver custom tag I am getting this error.

[Vue warn]: Unknown custom element: <ValidationObserver> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

I add it to the components in the <script> section of the .vue element.

    <script>
    import { ValidationObserver } from 'vee-validate';
    import { mapState, mapGetters, mapActions } from 'vuex';

    export default {
      data: () => ({
        name: 'ValidationObserver',
        components: {
          ValidationObserver,
        },
    // code continues on from here

In case it was necessary, I also included it in the components in my main.js file where the Vue app is created. It did not fix the error.

Boussadjra Brahim · Accepted Answer · 2020-08-18 20:03:14Z

3

the components option should be outside the data option :

export default {
  data: () => ({
    name: 'ValidationObserver',
  }),
 components: {
      ValidationObserver,
    },

answered Aug 18, 2020 at 20:03

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue custom element error with vee-validate ValidationObserver component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related