@tuzzle/nuxt

@tuzzle/nuxt is a Nuxt 4 module that wires up @tuzzle/vue: it configures runtimeConfig, auto-imports the components and composables, and exposes a Nitro signing helper.

npm install @tuzzle/nuxt

Setup

Add the module and configure it under the tuzzle key. Keep secret out of the public config — it stays server-only.

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@tuzzle/nuxt'],
  tuzzle: {
    cdnUrl: 'https://cdn.tzzl.io',
    space: 'a1b2c3',
    baseUrl: 'https://api.tzzl.io',
    secret: process.env.TUZZLE_SIGNED_URL_SECRET, // server-only
  },
})

Every option can also be set via environment variables (NUXT_TUZZLE_CDN_URL, NUXT_TUZZLE_SPACE, NUXT_PUBLIC_TUZZLE_*, …).

Components & composables

These are auto-imported, no manual import needed:

• Components: <TuzzleImage>, <TuzzleChooser>, <TuzzleChooserButton>
• Composables: useTuzzle(), useTuzzleImage(), useChooser(), useUpload()

<script setup>
const src = useTuzzleImage('image-01HQ...', { width: 400, format: 'webp' })
const { open } = useChooser({ onSelect: assets => insert(assets) })
</script>

<template>
  <TuzzleImage src="image-01HQ..." :width="400" alt="Cover" />
  <button @click="open">
    Choose media
  </button>
</template>

Server-side signing

A signTuzzleUrl helper is available in your Nitro server routes. It reads the secret and CDN config from runtimeConfig, so you never pass the secret around.

// server/api/sign.get.ts
export default defineEventHandler(async () => {
  const url = await signTuzzleUrl('private/contract.pdf', { expiresIn: 1800 })
  return { url }
})