test

src/defaults.ts

@@ -12,7 +12,10 @@ export const getDefaultUiConfig = (colors?: string[]) => ({
     error: 'red',
     neutral: 'slate'
   }, [...(colors || []), 'neutral' as any]),
-  icons
+  icons,
+  csp: {
+    nonce: false
+  }
 })
 
 export const defaultOptions = {

src/module.ts

@@ -86,6 +86,7 @@ export default defineNuxtModule<ModuleOptions>({
     nuxt.options.alias['#ui'] = resolve('./runtime')
 
     nuxt.options.appConfig.ui = defu(nuxt.options.appConfig.ui || {}, getDefaultUiConfig(options.theme.colors))
+    nuxt.options.appConfig.ui.csp = defu(nuxt.options.appConfig.ui.csp || {}, options.csp)
 
     // Isolate root node from portaled components
     nuxt.options.app.rootAttrs = nuxt.options.app.rootAttrs || {}

src/runtime/plugins/colors.ts

@@ -23,6 +23,8 @@ export default defineNuxtPlugin(() => {
   const appConfig = useAppConfig()
   const nuxtApp = useNuxtApp()
 
+  const nonce = computed(() => (appConfig.ui as any)?.csp?.nonce as string | undefined)
+
   const root = computed(() => {
     const { neutral, ...colors } = appConfig.ui.colors
 
@@ -44,7 +46,8 @@ export default defineNuxtPlugin(() => {
     style: [{
       innerHTML: () => root.value,
       tagPriority: -2,
-      id: 'nuxt-ui-colors'
+      id: 'nuxt-ui-colors',
+      ...(nonce.value ? { nonce: nonce.value } : {})
     }]
   }
 
@@ -54,6 +57,10 @@ export default defineNuxtPlugin(() => {
 
     style.innerHTML = root.value
     style.setAttribute('data-nuxt-ui-colors', '')
+
+    if (nonce.value) {
+      style.setAttribute('nonce', nonce.value)
+    }
     document.head.appendChild(style)
 
     headData.script = [{

src/templates.ts

@@ -165,6 +165,9 @@ type AppConfigUI = {
   }
   icons?: Partial<typeof icons>
   tv?: typeof defaultConfig
+  csp?: {
+    nonce?: string
+  }
 } & TVConfig<typeof ui>
 
 declare module '@nuxt/schema' {