Does Vue.js require jQuery ?

If you have developed front-end Javascript for some time, you are probably familiar with jQuery. You may even not imagine a project without it. It’s time to get rid of your old habits, you do not need jQuery anymore.

At the beginning of your Vue journey, you will eventually be thinking “I could do that sooo easily with jQuery”. That is true, but there is always another way !

Access the DOM

You know how easy it is to hide/show an element with v-show so I won’t go down that road. But how can we access the DOM elements now ?

With jQuery you can write var myElement = $('#my-element'). I admit, that is really cool, and it handles fancy CSS selectors. But then you are not writing vanilla Javascript anymore, and your variable doesn’t contain a DOM element, but a jQuery object, with all its API that you probably won’t need.

You could access this element using document.getElementById('my-element') but that would not be suitable for Vue’s virtual DOM mechanism because this element could be re-rendered any time.

Fortunately, Vue provides an API to access a certain DOM element. Your HTML would look like this :

    <p ref="myElement">This is the content of my element.</p>

export default {
  mounted () {

Read more about it in the docs

Helper functions

I know, the $.each function was neat to iterate through an array… But now there is ES2015 and tons of helper libraries you can include, such as lodash.

Let’s use the following array :

var myArray = ['we', 'love', 'javascript'];

And update it so that all its values become uppercase :

// jQuery
$.each(myArray, function(value, index) {
  myArray[index] = value.toUppercase();

// ES2015
myArray.forEach((value, index) => {
  myArray[index] = value.toUppercase()

// ES2015 (using map method)
myArray = => value.toUppercase())

// lodash
var _ = require('lodash');
myArray =, function(value) {
  return value.toUppercase();

Something else in mind ?

You have another use case where you believe you need jQuery ? Let’s discuss it in the comments :)

Latest posts

Use Vue.js to create custom web components

Include Vue.js components in any HTML/JS application

Use a global event bus instead of a state manager

Emit and listen to events across every Vue components of your app

Vue.js Component Style Guide

General purpose recommandations for writing Vue.js components code

How to use Docker containers for Vue.js applications

Get started with Docker and Vue.js

Hide elements during loading using "v-cloak"

You probably need this directive and didn't know it

Using Bootstrap with Vue.js

Question is : do you really need Boostrap ?

Build, test and deploy your Vue.js app easily with Gitlab

Introduction to Continuous Integration using free Gitlab tools

Another way to declare Vuex modules

`vuex-module` provides a syntax to write your store modules' state, actions, getters, etc. You may want to use it.

Simple state management, simpler than Vuex

Vue Stash makes it easy to share reactive data between components. An alternative to Vuex.

Hybrid Vue.js app in Cordova : desktop or mobile ?

A simple hack to know if the code is executed in a website or in the Cordova version of your app