How to use jquery in vueJS?
February 22, 2023Hi Friends đź‘‹,
Welcome To SortoutCode! ❤️
To use jquery in vueJS.we are going to use the jQuery package in vuejs. we can use the jquery function, method, and other features just as we are using in the other languages.
Today I am going to show you How to use jquery in VueJS?
Table of contains
- Setup the Vue.js
- Install the jQuery package
- Add the jQuery
- Using the jQuery
Let’s start today’s tutorial How do I use jquery in VueJS?
Setup the Vue.js
First, we have to install the Vue project, I had installed the vueJS in my system. If you haven’t installed or have any problem with installation you can follow this article, which will show you step by step process of installation.
How to Install the VueJS project?
Install jQuery package
To install the jQuery package, we have to use this command
npm i jqueryAdd the jquery
After the installation is complete.we have to import the jquery first before using in components like this,
import $ from "jquery";Using the jQuery
We can use the jquery’s almost all the features in the vuejs.To demonstrate we are going to take a small example and show you using the form and its data:
<template>
<div>
<h1>Welcome to sortoutcode.com</h1>
<div class="row justify-content-center">
<div class="col-md-8">
<form v-on:submit="getformdata">
<div class="form-group">
<label>Name</label>
<input
type="text"
class="form-control"
id="name"
placeholder="Enter name"
/>
</div>
<div class="form-group">
<label>Email</label>
<input
type="email"
class="form-control"
id="email"
placeholder="Email"
/>
</div>
<button type="submit">Submit</button>
</form>
<p id="formdata"></p>
</div>
</div>
</div>
</template>
<script>
import $ from "jquery";
export default {
name: "FirstComponent",
methods: {
getformdata(e) {
e.preventDefault();
let name = $("#name").val();
let email = $("#email").val();
$("#formdata").text(name + " | " + email);
},
},
};
</script>For now, let’s check the output.
All the best đź‘Ť.