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

user_4566086 0
Viewed 715

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 class="container">

   <div class="row">

       <div id = "app">


       </div>

   </div>

</div>


<script src="https://unpkg.com/vue@next"></script>
<script src="https://cdn.jsdelivr.net/npm/vuelidate@0.7.7/dist/vuelidate.min.js" integrity="sha256-La6WkedSRP9RsZaBVOO1mwpob2EhzoiYSCxmAizHsYM=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/vuelidate@0.7.7/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 .

vuejs2 vuejs3 vue-component vue.js javascript
1 Answers

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.

Here's how to re-export as immediately invoked function expression (iife) using rollup:

  1. Create a temp folder, switch to it and initiate a node 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).

  1. create index.js:
import { useVuelidate } from '@vuelidate/core';
window.useVuelidate = useVuelidate;
  1. Add required packages for your export:
npm i rollup @rollup/plugin-node-resolve @vuelidate/core vue-demi
  • rollup bundles your file,
  • node-resolve rollup plugin resolves dependencies and includes them in the bundle
  • vue-demi is a @vuelidate/core dependency.
    In turn, vue-demi has vue as dependency, but we'll let rollup know via config vue is already available in the global scope, so it shouldn't be included in the bundle.
  1. create rollup.config.js:
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()]
}
  1. Bundle your file:
./node_modules/.bin/rollup --config rollup.config.js
  1. If everything went well, you should now have a vuelidate.iife.js file in the same folder.
  2. 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

user_18916770
Related