How to add jquery in vueJS?

Hi 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 👍.