nuxt security module allow iframe for nuxt studio preview display to work

   export default defineNuxtConfig({
     security: {
       headers: {
         contentSecurityPolicy: {
           'frame-ancestors': ["'self'", '<https://studio.nuxt.com',> '<https://nuxt.studio'],>
         },
       },
     },
   })
   

   export default defineNuxtConfig({
     security: {
       headers: {
         contentSecurityPolicy: {
           'frame-ancestors': ["'self'", '<https://studio.nuxt.com',> '<https://nuxt.studio'],>
         },
       },
     },
   })
   

     export default defineNuxtConfig({
       content: {
         preview: {
           api: '<https://api.nuxt.studio'>
         }
       }
     })
     

     export default defineNuxtConfig({
       content: {
         preview: {
           api: '<https://api.nuxt.studio'>
         }
       }
     })
     

// app.config.ts
export default defineAppConfig({
  ui: {
    icons: {
      system: 'i-ph-desktop',
      light: 'i-ph-sun',
      dark: 'i-ph-moon'
    }
  }
})

// app.config.ts
export default defineAppConfig({
  ui: {
    icons: {
      system: 'i-ph-desktop',
      light: 'i-ph-sun',
      dark: 'i-ph-moon'
    }
  }
})

<script setup lang="ts">
const items = ref(['Backlog', 'Todo', 'In Progress', 'Done'])
const value = ref('Backlog')

function handleCurrencyChange(newValue) {
  // Your logic here
  console.log('Selected:', newValue)
}
</script>

<template>
  <USelectMenu
    v-model="value"
    :items="items"
    @update:model-value="handleCurrencyChange"
    class="w-48"
  />
</template>

<script setup lang="ts">
const items = ref(['Backlog', 'Todo', 'In Progress', 'Done'])
const value = ref('Backlog')

function handleCurrencyChange(newValue) {
  // Your logic here
  console.log('Selected:', newValue)
}
</script>

<template>
  <USelectMenu
    v-model="value"
    :items="items"
    @update:model-value="handleCurrencyChange"
    class="w-48"
  />
</template>

const selectedCurrency = computed({
  get() {
    // Find the matching option by value and return the same object reference
    return currencyOptions.value.find(
      (option) => option.value === preferredCurrency
    )
  },
  set(newValue) {
    if (newValue?.value && CURRENCY_CONFIGS[newValue.value]) {
      setCurrencyPreference(newValue.value)
    }
  },
})

const selectedCurrency = computed({
  get() {
    // Find the matching option by value and return the same object reference
    return currencyOptions.value.find(
      (option) => option.value === preferredCurrency
    )
  },
  set(newValue) {
    if (newValue?.value && CURRENCY_CONFIGS[newValue.value]) {
      setCurrencyPreference(newValue.value)
    }
  },
})

<script setup lang="ts">
const { setCurrencyPreference, preferredCurrency } = useCurrencyStore()

const currencyOptions = computed(() =>
  Object.entries(CURRENCY_CONFIGS).map(([key, config]) => ({
    id: key as CurrencyDisplay,
    label: config.code,
    icon: config.icon,
  }))
)

const selectedCurrency = computed({
  get() {
    // Return the primitive value (e.g., "usd")
    return preferredCurrency
  },
  set(newValue) {
    setCurrencyPreference(newValue)
  },
})
</script>

<template>
  <USelectMenu
    v-model="selectedCurrency"
    :items="currencyOptions"
    value-key="id"
    :icon="currencyOptions.find(opt => opt.id === selectedCurrency)?.icon"
    :ui="{
      trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200',
    }"
  />
</template>

<script setup lang="ts">
const { setCurrencyPreference, preferredCurrency } = useCurrencyStore()

const currencyOptions = computed(() =>
  Object.entries(CURRENCY_CONFIGS).map(([key, config]) => ({
    id: key as CurrencyDisplay,
    label: config.code,
    icon: config.icon,
  }))
)

const selectedCurrency = computed({
  get() {
    // Return the primitive value (e.g., "usd")
    return preferredCurrency
  },
  set(newValue) {
    setCurrencyPreference(newValue)
  },
})
</script>

<template>
  <USelectMenu
    v-model="selectedCurrency"
    :items="currencyOptions"
    value-key="id"
    :icon="currencyOptions.find(opt => opt.id === selectedCurrency)?.icon"
    :ui="{
      trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200',
    }"
  />
</template>

<script setup lang="ts">
const items = ref([
  { label: 'Backlog', id: 'backlog' },
  { label: 'Todo', id: 'todo' },
  { label: 'In Progress', id: 'in_progress' },
  { label: 'Done', id: 'done' }
])
const value = ref('todo')
</script>

<template>
  <USelectMenu v-model="value" value-key="id" :items="items" class="w-48" />
</template>

<script setup lang="ts">
const items = ref([
  { label: 'Backlog', id: 'backlog' },
  { label: 'Todo', id: 'todo' },
  { label: 'In Progress', id: 'in_progress' },
  { label: 'Done', id: 'done' }
])
const value = ref('todo')
</script>

<template>
  <USelectMenu v-model="value" value-key="id" :items="items" class="w-48" />
</template>

<script setup lang="ts">
const { preferredCurrency, setCurrencyPreference } = useCurrencyStore()

const currencyOptions = computed(() =>
  Object.entries(CURRENCY_CONFIGS).map(([key, config]) => ({
    id: key, // This should match the value in your Pinia ref
    label: config.code,
    icon: config.icon,
  }))
)

// Optional: If you want to show the icon of the selected currency in the menu
const selectedIcon = computed(() =>
  currencyOptions.value.find(opt => opt.id === preferredCurrency.value)?.icon
)
</script>

<template>
  <USelectMenu
    v-model="preferredCurrency"
    :items="currencyOptions"
    value-key="id"
    :icon="selectedIcon"
    @update:model-value="setCurrencyPreference"
    class="w-48"
  />
</template>

<script setup lang="ts">
const { preferredCurrency, setCurrencyPreference } = useCurrencyStore()

const currencyOptions = computed(() =>
  Object.entries(CURRENCY_CONFIGS).map(([key, config]) => ({
    id: key, // This should match the value in your Pinia ref
    label: config.code,
    icon: config.icon,
  }))
)

// Optional: If you want to show the icon of the selected currency in the menu
const selectedIcon = computed(() =>
  currencyOptions.value.find(opt => opt.id === preferredCurrency.value)?.icon
)
</script>

<template>
  <USelectMenu
    v-model="preferredCurrency"
    :items="currencyOptions"
    value-key="id"
    :icon="selectedIcon"
    @update:model-value="setCurrencyPreference"
    class="w-48"
  />
</template>

<script setup lang="ts">
const { preferredCurrency } = useCurrencyStore()
const selectedCurrency = ref(preferredCurrency.value)

watch(
  () => preferredCurrency.value,
  (newVal) => {
    selectedCurrency.value = newVal
  }
)

watch(
  selectedCurrency,
  (newVal) => {
    // Optionally update the store if the user changes the selection
    if (preferredCurrency.value !== newVal) {
      preferredCurrency.value = newVal
    }
  }
)
</script>

<template>
  <USelectMenu
    v-model="selectedCurrency"
    :items="currencyOptions"
    value-key="id"
    :icon="currencyOptions.find(opt => opt.id === selectedCurrency)?.icon"
  />
</template>

<script setup lang="ts">
const { preferredCurrency } = useCurrencyStore()
const selectedCurrency = ref(preferredCurrency.value)

watch(
  () => preferredCurrency.value,
  (newVal) => {
    selectedCurrency.value = newVal
  }
)

watch(
  selectedCurrency,
  (newVal) => {
    // Optionally update the store if the user changes the selection
    if (preferredCurrency.value !== newVal) {
      preferredCurrency.value = newVal
    }
  }
)
</script>

<template>
  <USelectMenu
    v-model="selectedCurrency"
    :items="currencyOptions"
    value-key="id"
    :icon="currencyOptions.find(opt => opt.id === selectedCurrency)?.icon"
  />
</template>

<USelectMenu
  v-model="selectedCurrency"
  :items="currencyOptions"
  :icon="currencyOptions.find((opt) => opt.value === currencyStore.preferredCurrency)?.icon"
  :ui="{ trailingIcon: 'transition-transform duration-200 group-data-[state=open]:rotate-180' }"
  :search-input="false" <!-- This disables the search input -->
/>

<USelectMenu
  v-model="selectedCurrency"
  :items="currencyOptions"
  :icon="currencyOptions.find((opt) => opt.value === currencyStore.preferredCurrency)?.icon"
  :ui="{ trailingIcon: 'transition-transform duration-200 group-data-[state=open]:rotate-180' }"
  :search-input="false" <!-- This disables the search input -->
/>