feat!: Unhead 1.10.0 integration (#203)

client/app.vue

@@ -193,7 +193,7 @@ function viewDocs(docs: string) {
                       Status
                     </div>
                     <div class="capitalize">
-                      {{ script.$script.status.value }}
+                      {{ script.status.value }}
                     </div>
                   </div>
                   <div v-if="scriptSizes[script.src]">
@@ -209,10 +209,10 @@ function viewDocs(docs: string) {
                     <div>{{ script.loadTime }}</div>
                   </div>
                   <div>
-                    <NButton v-if="script.$script.status === 'awaitingLoad'" @click="script.$script.load()">
+                    <NButton v-if="script.status === 'awaitingLoad'" @click="script.load()">
                       Load
                     </NButton>
-                    <NButton v-else-if="script.$script.status === 'loaded'" @click="script.$script.remove()">
+                    <NButton v-else-if="script.status === 'loaded'" @click="script.remove()">
                       Remove
                     </NButton>
                   </div>

docs/content/_magic-api.md

@@ -1,12 +1,14 @@
 ```vue
 <script lang="ts" setup>
-const { $script, gtag } = useScriptGoogleAnalytics(
+const { $script, proxy } = useScriptGoogleAnalytics(
   { id: 'G-1234567' },
   { trigger: 'manual' }
 )
 // send events
-gtag('config', 'UA-123456789-1')
+proxy.gtag('config', 'UA-123456789-1')
 // ..
-$script.load() // load the script
+$script.onLoaded(() => {
+  // script loaded
+})
 </script>
 ```

docs/content/docs/1.getting-started/3.confetti-tutorial.md

@@ -111,7 +111,7 @@ when switching between pages as `new window.JSConfetti()` needs to be called bet
 
 ```vue [Explicit script Load]
 <script setup lang="ts">
-const { $script } = useScriptNpm({
+const { onLoaded } = useScriptNpm({
   packageName: 'js-confetti',
   file: 'dist/js-confetti.browser.js',
   version: '0.12.0',
@@ -121,19 +121,17 @@ const { $script } = useScriptNpm({
     },
   },
 })
-onMounted(() => {
-  $script.then(({ JSConfetti }) => {
-    // using the real API instance
-    const confetti = new JSConfetti()
-    confetti.addConfetti({ emojis: ['🌈', '⚡️', '💥', '✨', '💫', '🌸'] })
-  })
+onLoaded(({ JSConfetti }) => {
+  // using the real API instance
+  const confetti = new JSConfetti()
+  confetti.addConfetti({ emojis: ['🌈', '⚡️', '💥', '✨', '💫', '🌸'] })
 })
 </script>
 ```
 
 ```vue [Proxy Functions]
 <script setup lang="ts">
-const { addConfetti } = useScriptNpm({
+const { proxy } = useScriptNpm({
   packageName: 'js-confetti',
   file: 'dist/js-confetti.browser.js',
   version: '0.12.0',
@@ -143,7 +141,7 @@ const { addConfetti } = useScriptNpm({
 })
 onMounted(() => {
   // just works
-  addConfetti({ emojis: ['🌈', '⚡️', '💥', '✨', '💫', '🌸'] })
+  proxy.addConfetti({ emojis: ['🌈', '⚡️', '💥', '✨', '💫', '🌸'] })
 })
 </script>
 ```
@@ -172,7 +170,7 @@ declare global {
   interface Window extends JSConfettiApi {}
 }
 
-const { $script } = useScriptNpm<JSConfettiApi>({
+const { onLoaded } = useScriptNpm<JSConfettiApi>({
   packageName: 'js-confetti',
   file: 'dist/js-confetti.browser.js',
   version: '0.12.0',
@@ -183,7 +181,7 @@ const { $script } = useScriptNpm<JSConfettiApi>({
   },
 })
 onMounted(() => {
-  $script.then(({ JSConfetti }) => {
+  onLoaded(({ JSConfetti }) => {
     const confetti = new JSConfetti()
     // fully typed!
     confetti.addConfetti({ emojis: ['🌈', '⚡️', '💥', '✨', '💫', '🌸'] })
@@ -201,15 +199,15 @@ In this example we'll combine the [useScriptTriggerElement](/docs/api/use-script
 ```vue [app.vue]
 <script setup lang="ts">
 const mouseOverEl = ref<HTMLElement>()
-const { $script } = useScriptNpm({
+const { onLoaded } = useScriptNpm({
   // ..
   scriptOptions: {
     trigger: useScriptTriggerElement({ trigger: 'mouseover', el: mouseOverEl })
   }
 })
 // ..
 onMounted(() => {
-  $script.then(({ JSConfetti }) => {
+  onLoaded(({ JSConfetti }) => {
     const confetti = new JSConfetti()
     confetti.addConfetti({ emojis: ['L', 'O', 'A', 'D', 'E', 'D'] })
   })

docs/content/docs/1.guides/0.key-concepts.md

@@ -45,19 +45,18 @@ Nuxt Scripts will also insert several extra tags to the script element to help w
 - `crossorigin="anonymous"` - Scripts are loaded with the `anonymous` attribute to prevent them from accessing cookies.
 - `referrerpolicy="no-referrer"` - Scripts are loaded with the `no-referrer` policy to prevent them from sending the referrer header.
 
+
 ## Understanding proxied functions
 
 You may wonder how the `useScript` composable can return SSR safe functions that can be called before the script is loaded.
 
 ```ts
-const { gtag } = useScript({
-  src: 'https://example.com/script.js',
-})
-// doesn't break anything - magic?
-gtag('event', 'page_view')
+const { proxy } = useScript('/script.js')
+// just works as you'd expect - magic?
+proxy.gtag('event', 'page_view')
 ```
 
-This is where the magic of the `useScript` composable comes in. The `gtag` function call is a proxy that queues the function to be called when the script is loaded. If
+The `gtag` function call is a proxy that queues the function to be called when the script is loaded. If
 the script never loads then the function is never called.
 
 This has several benefits:
@@ -72,17 +71,9 @@ But it also has some downsides:
 It's recommended to await the script load if you want to access the script's API directly.
 
 ```ts
-const { $script } = useScript({
-  src: 'https://example.com/script.js',
-})
+const { onLoaded } = useScript('/script.js')
 // use the script instance directly, not proxied
-$script.then(({ gtag }) => {
+onLoaded(({ gtag }) => {
   gtag('event', 'page_view')
 })
 ```
-
-### $script Object
-
-The `$script` object from useScript is a special object that allows you to interact with the script tag directly.
-
-For further details on the `$script` object, see the [useScript](/docs/api/use-script) API documentation.

docs/content/docs/1.guides/1.script-triggers.md

@@ -70,11 +70,11 @@ The `manual` trigger allows you to manually trigger the loading of a script. Thi
 control over when the script is loaded.
 
 ```ts
-const { $script } = useScript('https://example.com/script.js', {
+const { load } = useScript('https://example.com/script.js', {
   trigger: 'manual'
 })
 // ...
-$script.load()
+load()
 ```
 
 ## Promise

docs/content/docs/1.guides/4.global.md

@@ -106,14 +106,14 @@ export default defineNuxtConfig({
 ```vue [components/Tracking.vue]
 <script setup lang="ts">
 // This will not trigger the script to be loaded again because of the nuxt.config global script
-const { track, $script } = useNuxtApp().$scripts.tracker
+const { proxy, onLoaded } = useNuxtApp().$scripts.tracker
 
-$script.then(() => {
+onLoaded(() => {
   console.log('Script loaded')
 })
 
 function trackCustom() {
-  track('custom_event')
+  proxy.track('custom_event')
 }
 </script>
 

docs/content/docs/3.api/1.use-script.md

@@ -55,7 +55,7 @@ export type NuxtUseScriptOptions<T = any> = Omit<UseScriptOptions<T>, 'trigger'>
   /**
    * The trigger to load the script:
    * - `onNuxtReady` - Load the script when Nuxt is ready.
-   * - `manual` - Load the script manually by calling `$script.load()` or `$script.waitForLoad()`.
+   * - `manual` - Load the script manually by calling `load()`
    * - `Promise` - Load the script when the promise resolves.
    */
   trigger?: UseScriptOptions<T>['trigger'] | 'onNuxtReady'

docs/content/scripts/analytics/cloudflare-web-analytics.md

@@ -10,11 +10,11 @@ links:
 
 [Cloudflare Web Analytics](https://developers.cloudflare.com/analytics/web-analytics/) with Nuxt is a great privacy analytics solution. It offers free, privacy-centric analytics for your website. It doesn't gather personal data from your visitors, yet provides detailed insights into your web pages' performance as experienced by your visitors.
 
-## Nuxt Config Setup
-
 The simplest way to load Cloudflare Web Analytics globally in your Nuxt App is to use Nuxt config. Alternatively you can directly
 use the [useScriptCloudflareWebAnalytics](#usescriptcloudflarewebanalytics) composable.
 
+## Loading Globally
+
 If you'd like to avoid loading the analytics in development, you can use the [Environment overrides](https://nuxt.com/docs/getting-started/configuration#environment-overrides) in your Nuxt config.
 
 ::code-group
@@ -45,13 +45,7 @@ export default defineNuxtConfig({
 })
 ```
 
-::
-
-#### With Environment Variables
-
-If you prefer to configure your token using environment variables.
-
-```ts [nuxt.config.ts]
+```ts [Environment Variables]
 export default defineNuxtConfig({
   scripts: {
     registry: {
@@ -63,17 +57,17 @@ export default defineNuxtConfig({
     public: {
       scripts: {
         cloudflareWebAnalytics: {
-          token: '', // NUXT_PUBLIC_SCRIPTS_CLOUDFLARE_WEB_ANALYTICS_TOKEN
+          // .env
+          // NUXT_PUBLIC_SCRIPTS_CLOUDFLARE_WEB_ANALYTICS_TOKEN=<your-token>
+          token: '', 
         },
       },
     },
   },
 })
 ```
 
-```text [.env]
-NUXT_PUBLIC_SCRIPTS_CLOUDFLARE_WEB_ANALYTICS_TOKEN=<YOUR_TOKEN>
-```
+::
 
 ## useScriptCloudflareWebAnalytics
 
@@ -137,8 +131,8 @@ The Cloudflare Web Analytics composable injects a `window.__cfBeacon` object int
 to access this you can do by awaiting the script.
 
 ```ts
-const { $script } = useScriptCloudflareWebAnalytics()
-$script.then(({ cfBeacon }) => {
+const { onLoaded } = useScriptCloudflareWebAnalytics()
+onLoaded(({ cfBeacon }) => {
   console.log(cfBeacon)
 })
 ```

docs/content/scripts/analytics/fathom-analytics.md

@@ -10,12 +10,14 @@ links:
 
 [Fathom Analytics](https://usefathom.com/) is a great privacy analytics solution for your Nuxt app. It doesn't gather personal data from your visitors, yet provides detailed insights into how your site is used.
 
-## Nuxt Config
+## Loading Globally
 
 The simplest way to load Fathom Analytics globally in your Nuxt App is to use your Nuxt config, providing your site ID
 as a string.
 
-```ts [nuxt.config.ts]
+::code-group
+
+```ts [Always enabled]
 export default defineNuxtConfig({
   scripts: {
     registry: {
@@ -27,11 +29,7 @@ export default defineNuxtConfig({
 })
 ```
 
-If you'd like to avoid loading the analytics in development, you can conditionally set the config.
-
-```ts [nuxt.config.ts]
-import { isDevelopment } from 'std-env'
-
+```ts [Production only]
 export default defineNuxtConfig({
   $production: {
     scripts: {
@@ -45,11 +43,8 @@ export default defineNuxtConfig({
 })
 ```
 
-### With Environment Variables
-
-If you prefer to configure your token using environment variables.
 
-```ts [nuxt.config.ts]
+```ts [Environment Variables]
 export default defineNuxtConfig({
   scripts: {
     registry: {
@@ -61,17 +56,17 @@ export default defineNuxtConfig({
     public: {
       scripts: {
         fathomAnalytics: {
-          token: '', // NUXT_PUBLIC_SCRIPTS_FATHOM_ANALYTICS_SITE
+          // .env
+          // NUXT_PUBLIC_SCRIPTS_FATHOM_ANALYTICS_SITE=<your-token>
+          token: '',
         },
       },
     },
   },
 })
 ```
 
-```text [.env]
-NUXT_PUBLIC_SCRIPTS_FATHOM_ANALYTICS_SITE=<YOUR_SITE>
-```
+::
 
 ## Composable `useScriptFathomAnalytics`
 
@@ -142,16 +137,15 @@ to use the proxy for any void functions.
 ::code-group
 
 ```ts [Proxy]
-const { trackGoal } = useScriptFathomAnalytics()
-
+const { proxy } = useScriptFathomAnalytics()
 function trackMyGoal() {
-  trackGoal('MY_GOAL_ID', 100)
+  proxy.trackGoal('MY_GOAL_ID', 100)
 }
 ```
 
-```ts [Await Promise]
-const { $script } = useScriptFathomAnalytics()
-$script.then(({ trackGoal }) => {
+```ts [onLoaded]
+const { onLoaded } = useScriptFathomAnalytics()
+onLoaded(({ trackGoal }) => {
   trackGoal('MY_GOAL_ID', 100)
 })
 ```