From fad91ee57add9dc2511c2e5d396435e4379840cb Mon Sep 17 00:00:00 2001 From: vejja Date: Tue, 2 Jul 2024 00:35:59 +0200 Subject: [PATCH] Update from useScript to Nuxt Scripts --- .../1.documentation/5.advanced/3.strict-csp.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/docs/content/1.documentation/5.advanced/3.strict-csp.md b/docs/content/1.documentation/5.advanced/3.strict-csp.md index 86f735ac..2693544d 100644 --- a/docs/content/1.documentation/5.advanced/3.strict-csp.md +++ b/docs/content/1.documentation/5.advanced/3.strict-csp.md @@ -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') @@ -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