How to add jquery in vueJS?
February 20, 2023Hi Friends đź‘‹,
Welcome To SortoutCode! ❤️
To add jquery in vueJS.we are going to use the jQuery
package in vuejs.
Today I am going to show you How to add jquery in VueJS?
Table of contains
- Setup the Vue.js
- Install the jQuery package
- Add the jquery
Let’s start today’s tutorial How do I add 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 jquery
Add the jquery
After the installation is complete. we have to import jquery first before using it in components like this,
import $ from "jquery";
Let’s see the code example:
<template>
<div>
<h1>Welcome to sortoutcode.com</h1>
<input type="text" name="sitename" id="sitename" />
<button @click="getsitename">Submit</button>
<p>{{ sitename }}</p>
</div>
</template>
<script>
import $ from "jquery";
export default {
name: "FirstComponent",
data() {
return {
sitename: "",
};
},
methods: {
getsitename() {
this.sitename = $("#sitename").val();
},
},
};
</script>
For now, let’s check the output.

All the best 👍.