How to load external libraries in Nuxt3? - vue.js

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.