Api
useTinaBridge()
API reference for the useTinaBridge() composable: low-level postMessage access.
Direct access to the underlying TinaCMS postMessage bridge. Most components should use useTina() instead. This is for cases where you need to send or listen for custom messages Tina Admin doesn't send by default.
Type signature
function useTinaBridge(): {
isInIframe: Ref<boolean>
sendToAdmin: (type: string, payload?: unknown) => void
onAdminMessage: <T = unknown>(type: string, callback: (payload: T) => void) => () => void
bridgeError: Ref<Error | null>
}
Return value
| Property | Type | Description |
|---|---|---|
isInIframe | Ref<boolean> | true when the page is loaded inside the Tina Admin iframe. |
sendToAdmin | (type, payload?) => void | Posts a { type, payload, source: 'nuxt-tina' } message to the parent window. No-op when not in an iframe. |
onAdminMessage | (type, callback) => () => void | Subscribes to messages of a given type from the parent window. Returns an unsubscribe function; also cleaned up automatically on unmount. |
bridgeError | Ref<Error | null> | The last error caught while sending a message to Tina Admin, or null. Shared with useTina(): both composables read the same underlying value. |
Example
<script setup lang="ts">
const { isInIframe, sendToAdmin, onAdminMessage } = useTinaBridge()
onAdminMessage<{ value: boolean }>('quickEditEnabled', (payload) => {
console.log('Quick edit toggled:', payload.value)
})
function notifyAdmin() {
sendToAdmin('my-custom-event', { foo: 'bar' })
}
</script>