JavaScript

Complete Guide to Integrating jQuery with Nuxt.js

Since most browsers have implemented features like document.querySelectorAll, or fetch, the importance of jQuery has gone down a lot. Most developers nowadays use native JavaScript functions in place of the ones provided by jQuery. With the advent of new JavaScript frameworks, like, React or Vue, most web-developers do not need all the features provided by jQuery.

However, a handful of people still use jQuery and its immensely helpful plugins. The whole ecosystem of jQuery plugins have given us developers a lot of new functionality which was definitely not available before jQuery.

In this post, I am going to walk you through the problems you may encounter while incorporating jQuery plugins while building web-apps using Nuxt.js.

Nuxt.js is a Vue-based JavaScript framework that lets you build web-applications which are either Single Page Application or Server Side Rendered.

While this post is more geared towards Nuxt (and Vue for that matter), you may also benefit from it even if you are building applications with Next.js, the React.js counterpart of Nuxt. The basic ideas outlined in this post are the same.

Adding jQuery to Nuxt app

Inside head tag

If you want to add jQuery to your Nuxt app’s head tag, head over to nuxt.config.js and under head section, add the following:

script: [
        { src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js' },
]

Before the ending body tag

If you want to load jQuery at the ending body tag, go to /layouts/default.vue (the default layout file) and inside export default, add the following:

head: {
	script: [
	    { src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js', body: true },
        ]
}

Using a third-party jQuery plugin

Third-party jQuery plugins come handy when you want to add interactivity to your app. Here’s how you can add a jQuery plugin: Let us say you want to use jQuery countTo plugin inside a component. Head over to the component file and insert this inside export default block:

mounted() {
   $('.timer').countTo();
}

This way every time your component is mounted, the plugin will be attached to timer class.

Re-using document.ready

Let us say you have received a html template built by another developer who has wrote a lot of jQuery code that needs to be fired every time the document is loaded. It looks like this:

$(document).ready({
   // jQuery code here
})

The problem you will encounter is this: Nuxt loads the document only once. Whether you are running it in SSR or SPA mode, all subsequent requests will be made using AJAX calls. So the pages are loaded dynamically. And because of that, the above code won’t fire everytime content is loaded dynamically.

In order to fix this, create a new file inside /plugins directory. Let us call this file after-each.js and put the following code in there:

export default ({ app }) => {

	app.router.afterEach((to, from) => {
            $(document).trigger('router-loaded');
	})
}

The above code will fire router-loaded event every time contents are loaded dynamically (via change in routes). To activate the plugin, head to nuxt.config.js and put this inside module.exports block.

plugins: [
      { src: '~/plugins/after-each', mode: 'client' },
],

Finally, replace all $(document).ready({...}) with $(document).on('router-loaded',function () {...}) This way you can catch all page-loads and dynamic refresh, and attach the events accordingly.

Conclusion

The web-developer community is slowly moving away from jQuery and its plugins. The number of open-source zero-dependency JavaScript plugins are on the rise. But admittedly, jQuery still has a huge number of plugins that just does the job. I hope this post will help you integrate these plugins to your next best Nuxt app!