What are the steps to implement Vuelidate 2 in a web browser?

Question

What are the steps to implement Vuelidate 2 in a web browser?

Back in the stone age, we used to just drop in a .js file or a CDN reference and start coding. But now things seem much more complicated. I'm trying to use Vuelidate 2 in the browser, but I can't seem to figure it out. I've already done

npm install @vuelidate/core @vuelidate/validators -g

and that's pretty much all the installation instructions I've found on the website. What do I do next? The example they provide for importing the modules is using es6 syntax, which would need to be transpiled for wider browser support, right?

Do I need Browserify, Babel, Webpack... what do I need to do to simply write client-side JavaScript for my page using Vuelidate? I'm not building a single-page app, nor running JavaScript server-side, nor worried about page size at the moment. I just want to test out Vuelidate 2. I've encountered similar issues with other libraries not being precompiled into a browser-ready .js file, which I assume is for optimizing the modules you need. It's getting harder to get by without knowing how to do this, but it's not any easier to figure out where to start.

javascript npm vuejs2 es6-modules vuelidate

Answer 1

Answer №1

I found a solution using a more traditional method. In my ASP.NET MVC application, I needed to incorporate Vue and Vuelidate on a specific page. After facing some challenges and almost reverting back to JQuery, I decided to:

1. Download the necessary scripts instead of using a CDN due to network restrictions within my company.

<script src="~/Scripts/vue.global.js"></script>
<!--  Vuelidate -->
<script src="~/Scripts/vue.demi.js"></script>
<script src="~/Scripts/vue.validate.core.js"></script>
<script src="~/Scripts/vue.validators.js"></script>

2. Within the script tags on the page, I implemented the following:

const MyApp = {
        data() {
            return {
                v$: Vuelidate.useVuelidate(),
                vv: VuelidateValidators,
                formData: {
                    id: '',
                    name: '',
                    desc: '',
                    blahblah: ''
                }
            }
        },
        validations(){
            return {
                formData: {
                    id: {required: this.vv.required },
                    name: { required: this.vv.required},
                    desc: { required:this.vv.required},
                    blahblah: { required: this.vv.required}
                }
            }
        },
        methods: {
            
        },
        computed: {
            formIsValid() {
                return !this.v$.formData.$invalid;
            }
        },
        mounted: function () {
            
        }
    }

const app = Vue.createApp(MyApp).use(Vuelidate).mount('#app');

3. The form structure I implemented is as follows:

<form id="MyForm row">
<div class="col-md-12">
<div class="form-group" v-bind:class="{ 'has-error': v$.formData.id.$error }">
<label for="id" class="control-label required">ID</label>
<input type="number" class="form-control" id="id" name="ID" placeholder="ID" v-model="formData.id" v-on:blur="v$.formData.name.$touch()">
<small v-if="v$.formData.id.$error" class="help-block">The ID field is required</small>
</div>
<div class="form-group" v-bind:class="{ 'has-error': v$.formData.name.$error }">
<label for="name" class="control-label required">Name</label>
<input type="text" class="form-control" id="name" placeholder="Name" v-model="formData.name" v-bind:readonly="addMode ? false : true" v-on:blur="v$.formData.name.$touch()" required>
<small v-if="v$.formData.name.$error" class="help-block">The Name field is required</small>
</div>
</div>
</form>

It's important to note that this is just a guide on the approach I took. Please do not directly copy and paste this code assuming it will work for your project. Thank you.

Answer 2

I found a solution using a more traditional method. In my ASP.NET MVC application, I needed to incorporate Vue and Vuelidate on a specific page. After facing some challenges and almost reverting back to JQuery, I decided to:

1. Download the necessary scripts instead of using a CDN due to network restrictions within my company.

<script src="~/Scripts/vue.global.js"></script>
<!--  Vuelidate -->
<script src="~/Scripts/vue.demi.js"></script>
<script src="~/Scripts/vue.validate.core.js"></script>
<script src="~/Scripts/vue.validators.js"></script>

2. Within the script tags on the page, I implemented the following:

const MyApp = {
        data() {
            return {
                v$: Vuelidate.useVuelidate(),
                vv: VuelidateValidators,
                formData: {
                    id: '',
                    name: '',
                    desc: '',
                    blahblah: ''
                }
            }
        },
        validations(){
            return {
                formData: {
                    id: {required: this.vv.required },
                    name: { required: this.vv.required},
                    desc: { required:this.vv.required},
                    blahblah: { required: this.vv.required}
                }
            }
        },
        methods: {
            
        },
        computed: {
            formIsValid() {
                return !this.v$.formData.$invalid;
            }
        },
        mounted: function () {
            
        }
    }

const app = Vue.createApp(MyApp).use(Vuelidate).mount('#app');

3. The form structure I implemented is as follows:

<form id="MyForm row">
<div class="col-md-12">
<div class="form-group" v-bind:class="{ 'has-error': v$.formData.id.$error }">
<label for="id" class="control-label required">ID</label>
<input type="number" class="form-control" id="id" name="ID" placeholder="ID" v-model="formData.id" v-on:blur="v$.formData.name.$touch()">
<small v-if="v$.formData.id.$error" class="help-block">The ID field is required</small>
</div>
<div class="form-group" v-bind:class="{ 'has-error': v$.formData.name.$error }">
<label for="name" class="control-label required">Name</label>
<input type="text" class="form-control" id="name" placeholder="Name" v-model="formData.name" v-bind:readonly="addMode ? false : true" v-on:blur="v$.formData.name.$touch()" required>
<small v-if="v$.formData.name.$error" class="help-block">The Name field is required</small>
</div>
</div>
</form>

It's important to note that this is just a guide on the approach I took. Please do not directly copy and paste this code assuming it will work for your project. Thank you.

What are the steps to implement Vuelidate 2 in a web browser?

Answer №1

Similar questions

Encountering an error while trying to install DefinitelyTyped Typescript definitions via npm. Error message reads "Permission denied (publickey)."

tips for incorporating jade Mixin in JavaScript

What is the best way to experiment with angular-ui-tinymce within a tabset using Plunker?

Ways to display jQuery values as HTML text

Retrieve an item from a mapped array

Shutting down browser with WebdriverIO and launching a new one

The div element disappears upon calling the load() function

Is there a way to adjust the transparency of individual words in text as you scroll down a page, similar to the effect on https://joincly

"Discover the step-by-step method for retrieving a list of products within a specific category using Vue

Issue with Axios fetching data with parameter in Next.js not resolving

Having trouble with a beginner problem that's hindering the functionality of my code

Transfer the updated variable from a static JavaScript file to Next.js

Error 133 occurs when trying to create a node docker image

Instructions on removing rows by using buttons within a JavaScript-generated table

A step-by-step guide to displaying API data in a React frontend using functional components

Sending data between Angular and Python using both strings and JSON formats

Establishing a constant for a JavaScript class method

Attempting to send JSX as a prop value

Scrolling to an id element in Vue.js can be achieved by passing the ID in the URL using the "?" parameter. This

Error: The Jquery plugin Object #<HTMLDocument> does not have a function called 'observe'