Vuelidate on Vue js 3

I had a hard time today setting up Vuelidate on a test project for Vue.js 3.
I Followed a recent tutorial for Vue 3 found on a book that was published in September 2020, and guess what, it is already outdated.

The problem

The problem comes from the fact I was trying to use an old version of Vuelidate compatible with Vue.js 2 but not with the new version of Vue.js. There was not any evidence nor a remark on the GitHub page, so I have thought that I was doing something wrong until I finally decided to go read the documentation.

When i have tried to import the Vue library, without destructuring:

// main.js
Import Vue from 'vue';
import Vuelidate from 'vuelidate';

Vue.use(Vuelidate);

Cannot read property 'use' of undefined

When used with createApp imported function :

// main.js
import { createApp } from 'vue';
import Vuelidate from 'vuelidate';
// ...

const app = createApp(App);

app.use(Vuelidate);

Cannot read property 'super' of undefined

The solution

To import the new library go check the section called "Install via plugin in Vue 3.0" on this page.

The npm command:

npm install @vuelidate/core @vuelidate/validators

Import with destructuring

// main.js
import { createApp } from 'vue';
import { VuelidatePlugin } from '@vuelidate/core';
import App from './App.vue';
import './style.css';

const app = createApp(App);

app.config.productionTip = false;
app.use(VuelidatePlugin);
app.mount('#app');

The path to import the validators is also different:

// Component.vue
import { required, minLength } from '@vuelidate/validators';

I hope this will have helped you.
If you have found other solutions, I'll be happy to know more about them in the comment section 😄