Skip to content

Commit 3ae21f2

Browse files
committed
chore: improve read me
1 parent e040050 commit 3ae21f2

File tree

1 file changed

+42
-22
lines changed

1 file changed

+42
-22
lines changed

README.md

Lines changed: 42 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -27,44 +27,43 @@ Plus Nuxt goodies:
2727
- 🕵️ Privacy Features - Trigger scripts loading on cookie consent, honour DoNotTrack.
2828
- 🪵 DevTools integration - see all your loaded scripts with function logs
2929

30-
## Installation
30+
## Quick Start
3131

32-
1. Install `@nuxt/scripts` dependency to your project:
32+
To get started, simply run:
3333

3434
```bash
35-
pnpm add -D @nuxt/scripts
36-
#
37-
yarn add -D @nuxt/scripts
38-
#
39-
npm install -D @nuxt/scripts
35+
npx nuxi@latest module add @nuxt/scripts
4036
```
4137

42-
2. Add it to your `modules` section in your `nuxt.config`:
38+
To start using Nuxt Scripts, you can use the [useScript](https://unhead.unjs.io/usage/composables/use-script) composable to load your third-party scripts.
39+
40+
### Confetti Example
41+
42+
If you want to get a feel for how the module works, you can load the `js-confetti` library:
4343

4444
```ts
45-
export default defineNuxtConfig({
46-
modules: ['@nuxt/scripts']
45+
type JSConfettiApi = { addConfetti: (options?: { emojis: string[] }) => void }
46+
47+
const { addConfetti } = useScript<JSConfettiApi>('https://cdn.jsdelivr.net/npm/js-confetti@latest/dist/js-confetti.browser.js', {
48+
trigger: 'idle', // load on onNuxtReady
49+
assetStrategy: 'bundle', //
50+
use() {
51+
return new window.JSConfetti()
52+
},
4753
})
54+
// will run once the script loads
55+
addConfetti({ emojis: ['🌈', '⚡️', '💥', '', '💫', '🌸'] })
4856
```
4957

5058
## Background
5159

5260
Loading third-party IIFE scripts using `useHead` composable is easy. However,
5361
things start getting more complicated quickly around SSR, lazy loading, and type safety.
5462

55-
Nuxt Scripts was created to solve these issues and more with the goal of making third-party scripts a breeze to use.
56-
57-
## Usage
58-
59-
### Getting Started
60-
61-
To start using Nuxt Scripts, you can use the `useScript` composable to load your third-party scripts.
62-
63-
```ts
64-
useScript('https://cdn.jsdelivr.net/npm/js-confetti@latest/dist/js-confetti.browser.js')
65-
```
63+
Nuxt Scripts was created to solve these issues and more with the goal of making third-party scripts more performant,
64+
have better privacy and be better DX overall.
6665

67-
See the Unhead [useScript](https://unhead.unjs.io/usage/composables/use-script) guide for next steps.
66+
## Guides
6867

6968
### Bundling Scripts
7069

@@ -81,6 +80,27 @@ useScript('https://cdn.jsdelivr.net/npm/js-confetti@latest/dist/js-confetti.brow
8180
// js-confetti.browser.js will be downloaded and bundled with your app as a static asset
8281
```
8382

83+
### Overriding Scripts
84+
85+
When working with modules that use Nuxt Script, you may want to modify the
86+
behavior of the script. This is especially useful for
87+
changing the asset strategy of a script as it needs to be defined statically.
88+
89+
To do so you can use the `overrides` module option.
90+
91+
```ts
92+
export default defineNuxtConfig({
93+
scripts: {
94+
overrides: {
95+
// the key is either a specified key or the script src
96+
'confetti': {
97+
assetStrategy: 'bundle'
98+
}
99+
}
100+
}
101+
})
102+
```
103+
84104
### Privacy and Cookie Consent
85105

86106
Nuxt Scripts provides a `createScriptConsentTrigger` composable that allows you to load scripts based on user's consent.

0 commit comments

Comments
 (0)