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?

Answer 1

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.