How to load external libraries in Nuxt3?

Question

I am using Nuxt 3 RC and based on this video and this so solution, I am trying to load the library splitting.js to Nuxt.

After following the steps I am still getting the following error

Uncaught (in promise) ReferenceError: Splitting is not defined

This is my nuxt.config.ts

import { defineNuxtConfig } from "nuxt";

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  head: {
    title: "Nuxt RC 3",
    meta: [
      { charset: "utf-8" },
      { name: "viewport", content: "width=device-width, initial-scale=1" },
      { hid: "description", name: "description", content: "Nuxt.js project" },
    ],
    link: [
      { rel: "icon", type: "image/x-icon", href: "/favicon.ico" },
      {
        rel: "stylesheet",
        href: "https://unpkg.com/splitting/dist/splitting.css",
      },
      {
        rel: "stylesheet",

        href: "https://unpkg.com/splitting/dist/splitting-cells.css",
      },
    ],
    script: [
      {
        src: "https://unpkg.com/splitting/dist/splitting.min.js",
        type: "text/javascript",
      },
    ],
  },

css: [
    '~/assets/css/main.css'
],
  plugins: [

  ]
});

After moving the code to the layouts/default.vue layout, it's working, is there any specific reason why its not working when applied to the nuxt.config.ts file?

Probably because the library got loaded on the Server (and not only the client) but the related package is being used for DOM manipulation (something not available on the server). — kissu, May 14 '22 at 17:45
You should probably try to load it as an NPM package at first: https://splitting.js.org/guide.html#using-npm CDN is always more tricky, slower and riskier anyway. — kissu, May 14 '22 at 17:48
thanks, this fixes my requirement, but i am curious to know what is the fix if we want to use from cdn — Samtech, May 14 '22 at 18:00
I didn't tried with Nuxt3 yet, but those are all the [ways available](https://stackoverflow.com/a/67535277/8816585) for Nuxt2, some of them may still be relevant (or have a simple equivalent in Nuxt3). Still, even if it's an external snippet of code, I recommend keeping it locally than making an extra HTTP call to an external source and bring some decent amount of delay. — kissu, May 14 '22 at 18:03

kissu · Accepted Answer · 2022-05-15T07:44:17.380

Installing it via NPM

npm i splitting

Then importing it like that

import "splitting/dist/splitting.css"
import "splitting/dist/splitting-cells.css"
import Splitting from "splitting"

Splitting()

fixed the issue.

It's recommended on pretty much every aspect to use an NPM package anyway (on modern frameworks).

Here is a more detailed explanation regarding Nuxt2 libraries, there may be some equivalent or similar approaches overall.

How to load external libraries in Nuxt3?

1 Answers1