vuelidate in vue Property "$v" was accessed during render but is not defined on instance-CodePudding

I am building a vue component containing form in an html file. Need to validate form using vuelidate library.

Below warning is showing and validation is not working.

[Vue warn]: Property "$v" was accessed during render but is not defined on instance. at

const { required, minValue, minLength, email } = window.validators;
    const {Vuelidate} = window.vuelidate;
    const vue = {
        template:
        /*html*/
        `<div>
            <form >
                <p>
                    <input name="email" type="text" placeholder="Email" v-model="email" />
                    <span>{{$v}}</span>
                </p>
                <p>
                    <input name="password" v-model="password.password" type="password" placeholder="Password"/>
                    <span></span>
                </p>
                <p>
                    <input name="confirmPassword" v-model="password.confirm" type="password" placeholder="Confirm Password" />
                    <span></span>
                </p>
                <button @click="submitForm">Submit</button>
            </form>
        </div>
        `,
        data() {
            return {
                email: '',
                password: {
                    password: '',
                    confirm: '',
                },
            };
            
        },
        validations:  {
                email: { required },
                password: {
                    password: { required },
                    confirm: { required },
                }
        },
        mounted: function() { 
            
        },
        methods: {
            submitForm() {
                console.log(this.$v)
                alert("Form successfully submitted");
            },
        },
        };
    const app = Vue.createApp(vue);
    app.mount('#app');
    app.use(window.vuelidate.default);

input {
  border: 1px solid silver;
  border-radius: 4px;
  background: white;
  padding: 5px 10px;
}

.dirty {
  border-color: #5A5;
  background: #EFE;
}

.dirty:focus {
  outline-color: #8E8;
}

.error {
  border-color: red;
  background: #FDD;
}

.error:focus {
  outline-color: #F99;
}

<!DOCTYPE html>

<html>

<head>
   <title></title>

   <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" >
</head>

<body>

<div >

   <div >

       <div id = "app">


       </div>

   </div>

</div>


<script src="https://unpkg.com/vue@next"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuelidate.min.js" integrity="sha256-La6WkedSRP9RsZaBVOO1mwpob2EhzoiYSCxmAizHsYM=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/validators.min.js" integrity="sha256-0IEcyUDILTKDOFvs84hM79AdpmIDFw1d99udusXv2vQ=" crossorigin="anonymous"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
    
</script>
</body>
</html>

Vue is working fine but vuelidate is not working. I have a specific usecase where we want to integrate vuejs in html project. Vue seems to be a suitable option .

CodePudding user response：

Vuelidate does not seem to have an iife export. Which means (afaict) that it's not usable in browser, from cdn link. It has to be compiled by a node app, which has to resolve its dependencies.

They claim it's a Vue plugin, but ignore that Vue is capable of running in a browser, from standalone cdn link. It looks like it's a Vue SPA-only plugin.

Here's how to re-export it with rollup:

Create a folder, switch to it and initiate a project:

mkdir test && cd test && npm init --yes

Note: if runing this in a windows command prompt or powershell replace && with ; (or simply run each command separately).

create an index.js with the following content:

import { useVuelidate } from '@vuelidate/core';
window.useVuelidate = useVuelidate;

Add the following packages:

npm i rollup @rollup/plugin-node-resolve @vuelidate/core vue-demi

rollup bundles your file, the resolve plugin resolves dependencies and includes them in the bundle and vue-demi is a @vuelidate/core dependency. In turn, vue-demi has vue as dependency, but we'll let rollup know that's already available in the global scope, so it shouldn't be included in our bundle.

Add a rollup.config.js with this content:

import { nodeResolve } from '@rollup/plugin-node-resolve';

export default {
  input: './index.js',
  output: {
    format: 'iife',
    file: 'vuelidate.iife.js',
    globals: { vue: 'window.Vue' }
  },
  plugins: [nodeResolve()]
}

Bundle your file:

./node_modules/.bin/rollup --config rollup.config.js

If everything went well, you should now have a vuelidate.iife.js file in the same folder.
Load the file in your browser, after Vue, (it expects Vue to be defined in globalThis - a.k.a: window).

See it working: https://codesandbox.io/s/modest-mirzakhani-tq46j?file=/index.html