Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

feat(doc): introduce Nuxt Scripts as alternative to useScript #485

Merged
merged 1 commit into from
Jul 16, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 9 additions & 9 deletions docs/content/1.documentation/5.advanced/3.strict-csp.md
Original file line number Diff line number Diff line change
Expand Up @@ -312,7 +312,7 @@ export defaultNuxtConfig({

### The `useScript` composable

Starting from Nuxt 3.11, it is possible to insert any external script in one single line with the new `useScript` composable.
The Nuxt Scripts module allows you to insert any external script in one single line with its `useScript` composable.

```ts
useScript('https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js')
Expand All @@ -324,24 +324,24 @@ The `useScript` method has several key features:
- It does not insert inline event handlers, therefore CSP will never block the script from executing after load
- It is designed to load and execute asynchronously, which means you don't have to write code to check whether the script has finished loading before using it

For all of these reasons, we strongly recommend `useScript` as the best way to load your external scripts in a CSP-compatible way.
In addition, Nuxt Scripts provide easy integration of `useScript` into any Nuxt application:
- A number of standard scripts are already pre-packaged
- You can load your scripts globally in `nuxt.config.ts`
- `useScript` is auto-imported

The `unjs/unhead` repo has a [detailed section here](https://unhead.unjs.io/usage/composables/use-script) on how to use `useScript`.
For all of these reasons, we strongly recommend using the Nuxt Scripts module as the best way to load your external scripts in a CSP-compatible way.

Check out their examples and find out how easy it is to include Google Analytics in your application:
Check out their examples on [@nuxt/scripts](https://scripts.nuxt.com) and find out how easy it is to include Google Analytics in your application:

```ts
import { useScript } from 'unhead'

const { gtag } = useScript({
src: 'https://www.google-analytics.com/analytics.js',
}, {
const { gtag } = useScript('https://www.google-analytics.com/analytics.js', {
use: () => ({ gtag: window.gtag })
})
// Now use any feature of Google's gtag() function as you wish
// Instead of writing complex code to find and check window.gtag
```

If you don't want to install the Nuxt Scripts module, you can still use the uderlying native `useScript` method. You will need to `import { useScript } from '@unhead/vue'` in order to use it.

### The `useHead` composable

Expand Down
Loading