---
title: "NPM"
description: "Load IIFE scripts from NPM in your Nuxt app."
canonical_url: "https://scripts.nuxt.com/scripts/npm"
last_updated: "2026-05-03T02:50:10.185Z"
---

<script-stats>



</script-stats>

<script-docs>



</script-docs>

## Background

When working with [npm](https://npmjs.com) files, you'd typically include them as a node_module dependency in the `package.json` file. However,
optimizing the script loading of these scripts can be difficult, requiring a dynamic import of the module from a separate chunk and
loading it only when needed. It also slows down your build as the module needs to be transpiled.

The [`useScriptNpm()`](/scripts/npm) registry script abstracts this process, allowing you to load scripts that export immediately invokable functions with a single line of code.

In many instances it will still make more sense to include the script as a dependency in the `package.json` file, but for scripts that are not used often or
are not critical to the application, this can be a great alternative.

To begin with we can think of using this script as an alternative to the `useHead` composable. You can see an example of the abstraction
layers in the following code sample.

<code-group>

```ts [Registry Script useScriptNpm]
useScriptNpm({
  packageName: 'js-confetti',
  file: 'dist/js-confetti.browser.js',
  version: '0.12.0',
})
```

```ts [useScript]
useScript('https://cdn.jsdelivr.net/npm/js-confetti@0.12.0/dist/js-confetti.browser.js')
```

```ts [useHead]
useHead({
  script: [
    { src: 'https://cdn.jsdelivr.net/npm/js-confetti@latest/dist/js-confetti.browser.js' }
  ]
})
```

</code-group>

## [`useScriptNpm()`](/scripts/npm)

The [`useScriptNpm()`](/scripts/npm) composable lets you have fine-grain control over when and how npm scripts load on your site.

```ts
function useScriptNpm<T extends Record<string | symbol, any>>(_options: NpmInput) {}
```

Please follow the [Registry Scripts](/docs/guides/registry-scripts) guide to learn more about advanced usage.

### Return

To get types for the script you're loading, you'll need to augment the types of the [`useScriptNpm()`](/scripts/npm) function.

```ts
interface SomeApi {
  doSomething: () => void
}
useScriptNpm<SomeApi>({
  packageName: 'some-api'
})
```

<script-types>



</script-types>

## Example

See the [Tutorial: Load js-confetti](/docs/getting-started/confetti-tutorial) for further examples.