How to integrate external JavaScript libraries into Nuxt project without NPM

[bellagarcia]

I’m working with a specific JavaScript library (epub-js version 0.3.96) that I need to include in my Nuxt application. The library isn’t available through NPM in the version I need, so I’m looking for the best way to add it manually.

I’ve tried a few approaches but ran into issues. First, I don’t want to just dump it in node_modules since that doesn’t seem like the right approach. Then I attempted putting it in a composables subfolder, but the library has lots of self-referencing variables that caused problems. I had to disable SSR and convert several require statements to import statements.

Even after those changes, the library automatically injects const {inject} = require('vue'); at the top of the file, which breaks everything. Has anyone dealt with similar issues when adding external libraries to Nuxt? What’s the proper way to handle this situation?

[benmoore]

Try creating a custom wrapper for the library. Download the epub-js files, drop them in /assets/js/, then make a wrapper file that handles initialization. In your component, import it dynamically with await import() inside a client-only check. This way you control exactly how it loads without fighting the module system. I did this with an old PDF viewer that had the same require/import conflicts - worked great. The dynamic import skips the build-time processing that’s causing those injection issues.

[ClimbingLion]

create a /plugins folder and drop your library in there as a client-side plugin. name it with .client.js at the end - this stops SSR from breaking things. then just add it to your nuxt config’s plugins array with mode: 'client'. nuxt will load it correctly without screwing up the library’s internals.

[Neo_Movies]

I’ve dealt with this exact issue using legacy libraries that hate modern build systems. Here’s what actually worked: drop the library file in /public and load it as a script tag through nuxt.config.js. Just add it to the script array in your head config - boom, it’s globally available and skips the module bundler entirely. This sidesteps all those import/require transformation headaches since Nuxt treats it like a normal script instead of trying to process it as a module. The library lands on the window object, so you can grab it from components with process.client checks to dodge SSR issues. Way cleaner than fighting with module transformations, especially for libraries like epub-js that have messy internal dependencies.