How to load third-party scripts in Nuxt.js

How to load third-party scripts in Nuxt.js

In this article, Alexander Lichter (core Nuxt.js member) teaches you how to load third-party scripts in your Nuxt.js application. Both globally and on individual pages.

Almost every modern web application is using some kind of dependency, even besides the preferred JavaScript framework.

While most of the dependencies are available through NPM, many of them also provide a link to a CDN (Content Delivery Network) version so it can be included in any project without additional efforts or build steps.

But there is also a fair amount of popular third-party libraries that don't provide an NPM package and rely fully on being implemented via the script tag. Common examples are newsletter integrations, contact forms, and the Stripe SDK to process payments.

Having only a CDN link brings some benefits like allowing seamless updates from the authors without having the developers to update their software but it also has it's drawbacks, especially when working with modern JavaScript frameworks.

The integration, especially when only needed on a single page, becomes more complex. In addition, developers have to deal with asynchronously loading scripts.

Let's see how we can add such third party dependencies in our Nuxt.js project!

tutorials nuxt nuxt.js

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Nuxt.js Content Tutorial, Nuxt.js Auto-Import Tutorial

Nuxt.js Content is a Git-based Headless CMS that allows you to fetch Markdown, JSON, YAML and CSV! in this video we look at how easy it is to setup. We also look at Nuxt auto-import components!

Build file-based theme inheritance module in Nuxt - Vue.js Tutorials

Learn how to build a theme inheritance module in Nuxt.js. A perfect module for when you want to change parts of your codebase for special campaigns such as Black Friday or the holidays sales.

Nuxt js Laravel Authentication Tutorial With Example

Nuxt js Laravel Authentication Tutorial Example. We use third-party package called Tymon to create json web token and sent back to the client for an auth.

Nuxt js Tutorial For Beginners 2018

Nuxt js Tutorial For Beginners 2018. Nuxt js gives us a powerful SPA deployment mechanism without the need to use a Node.js runtime or any special server handling.

Responsive ecommerce template built with Vue.js and Nuxt.js

Responsive ecommerce template built with Vue.js and Nuxt.js