How to use jquery in vueJS?

Hi 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 jquery

Add 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.

how to use jquery in vuejs

All the best 👍.

Follow me on Twitter