fix: gracefully handle production only scripts

Fixes #479

Author: harlan-zw

src/runtime/composables/useScript.ts

@@ -4,6 +4,7 @@ import { useScript as _useScript } from '@unhead/vue/scripts'
 import { reactive } from 'vue'
 import type { NuxtDevToolsScriptInstance, NuxtUseScriptOptions, UseFunctionType, UseScriptContext } from '../types'
 import { onNuxtReady, useNuxtApp, useRuntimeConfig, injectHead } from '#imports'
+import { logger } from '../logger'
 
 function useNuxtScriptRuntimeConfig() {
   return useRuntimeConfig().public['nuxt-scripts'] as {
@@ -36,7 +37,19 @@ export function useScript<T extends Record<symbol | string, any> = Record<symbol
   nuxtApp.$scripts = nuxtApp.$scripts! || reactive({})
   const exists = !!(nuxtApp.$scripts as Record<string, any>)?.[id]
 
-  if (options.trigger === 'onNuxtReady' || options.trigger === 'client') {
+  const err = options._validate?.()
+  if (import.meta.dev && import.meta.client && err) {
+    // never resolves
+    options.trigger = new Promise(() => {})
+    if (!exists) {
+      let out = `Skipping script \`${id}\` due to invalid options:\n`
+      for (const e of err.issues) {
+        out += (`  ${e.message}\n`)
+      }
+      logger.info(out)
+    }
+  }
+  else if (options.trigger === 'onNuxtReady' || options.trigger === 'client') {
     if (!options.warmupStrategy) {
       options.warmupStrategy = 'preload'
     }
@@ -51,6 +64,12 @@ export function useScript<T extends Record<symbol | string, any> = Record<symbol
     nuxtApp.$scripts[id] = undefined
     return _remove()
   }
+  instance.load = async () => {
+    if (err) {
+      return Promise.reject(err)
+    }
+    return instance.load()
+  }
   nuxtApp.$scripts[id] = instance
   // used for devtools integration
   if (import.meta.dev && import.meta.client) {
@@ -97,7 +116,6 @@ export function useScript<T extends Record<symbol | string, any> = Record<symbol
         syncScripts()
       })
       payload.$script = instance
-      const err = options._validate?.()
       if (err) {
         payload.events.push({
           type: 'status',

src/runtime/logger.ts

@@ -0,0 +1,7 @@
+import { createConsola } from 'consola'
+
+export const logger = createConsola({
+  defaults: {
+    tag: 'nuxt-scripts',
+  },
+})

src/runtime/utils.ts

@@ -22,9 +22,7 @@ function validateScriptInputSchema<T extends GenericSchema>(key: string, schema:
       parse(schema, options)
     }
     catch (_e) {
-      const e = _e as ValiError<any>
-      console.error(e.issues.map((i: any) => `${key}.${i.path?.map((i: any) => i.key).join(',')}: ${i.message}`).join('\n'))
-      return e
+      return _e as ValiError<any>
     }
   }
   return null