[OG images] Cannot conditionally render `title` prop

[cossssmin]

Describe the bug

• nuxt-og-image@3.0.0-rc.53
• nuxt@3.11.2

It doesn't seem possible to conditionally render a prop named title in a component - nuxt-og-image will automatically fallback to the page's title so a conditional check will always evaluate to true and will render the fallback (page) title.

pages/donate.vue

defineOgImageComponent('OGWithCTA', {
  button: 'Donate now',
  description: 'Donate now to help our cause.',
})

useHead({
  title: 'Donate', // this is always being used as a fallback so the v-if below is always `true`
})

components/OgImage/OGWithCTA.vue

<script setup>
defineProps({
  title: String,
  description: String,
  button: String,
})
</script>

<template>
<h1
  v-if="title"
  v-html="title"
/>

<p
  v-if="description"
  v-html="description"
/>

<div
  v-if="button"
  v-html="button"
/>
</template>

Reproduction

No response

System / Nuxt Info

No response

[cossssmin]

Same with description. Sorry if this is expected behavior, I just found it a little confusing.

[harlan-zw]

This is the expected behaviour but you should be able to do explicit opt-outs such as:

defineOgImageComponent('OGWithCTA', {
  button: 'Donate now',
  title: false,
  description: false,
})

Changing the behavior at this point would be too much of a breaking change otherwise.

[cossssmin]

Thanks Harlan, that'll do.

[harlan-zw]

Just to be clear, this didn't previously work. I have just pushed up a fix for it though.