Compatibility with Vue 3?

[kuzeyalin]

Hi, the Library does great work with Jquery. But it doesn't seem to work with Vue 3. Is there sample code or documentation for Vue 3?

When I add it as in the documents, I get the following errors.

Compiled with problems:
ERROR
[eslint] 
/Users/kuzey/Desktop/ui/src/main.js
  18:8  error  'JustValidate' is defined but never used  no-unused-vars

/Users/kuzey/Desktop/ui/src/views/login.vue
  91:11  error  'validate' is assigned a value but never used  no-unused-vars

✖ 2 problems (2 errors, 0 warnings)

[Yuri]

These errors are related not to the code's operability, but to the fact that the variables: validate, JustValidate - are declared in the main.js file, but are not used anywhere, which is what the ESLINt no-unused-vars error says.

[kuzeyalin]

Thanks for the response. Yes, that error was because the text was not used. I just started learning :)

However, the actual error text appears in the browser console as follows.

Uncaught TypeError: Class constructor JustValidate cannot be invoked without 'new'
    at Object.use (runtime-core.esm-bundler.js:3549:11)
    at eval (main.js:44:1)
    at ./src/main.js (app.js:52:1)
    at __webpack_require__ (app.js:195:33)
    at app.js:1376:109
    at __webpack_require__.O (app.js:241:23)
    at app.js:1377:53
    at app.js:1379:12
use @ runtime-core.esm-bundler.js:3549
eval @ main.js:44
./src/main.js @ app.js:52
__webpack_require__ @ app.js:195
(anonymous) @ app.js:1376
__webpack_require__.O @ app.js:241
(anonymous) @ app.js:1377
(anonymous) @ app.js:1379

My Vue Code is as follows.

    import JustValidate from 'just-validate';
    const validate = new JustValidate('#basic_form');

    export default {
        data() {
            const Submit = () => {
                console.log('submit');
            }

            const value = ref(null);

            return {
      
                validate,
                Submit,
            }
        },

[Yuri]

From what I can see, you don't have the correct component structure.

In your case, you are using the options api syntax
In your case you are using the options api syntax (there is also a composition api, I recommend it, but now let's get back to discussing this point )

An example of the correct structure of a component:

<script>
export default {
  data() {
    return {
      greeting: 'Hello, world!'
    };
  },
  methods: {
    changeGreeting() {
      this.greeting = 'Hello, Vue!';
    }
  }
};
</script>

In your case you call JustValidate not in the context of the component.
I see that this class accepts id as a parameter, which is an attribute of the DOM element, so you need to call this class after the view draws the component and the element is available, you need to call it in the mounted() hook.

<script>
 import JustValidate from 'just-validate';
export default {
  data() {
    return {
      validator: null // Declare a variable that will hold our called class element
    };
  },
  methods: {
    changeGreeting() {
      this.greeting = 'Hello, Vue!';
    }
  },
  mounted() {
    this.validator = new JustValidate('#basic_form')
  }
};
</script>

That's all I can tell you with the data you gave me

[kuzeyalin]

Thanks so much for your reply. My problem is solved.