@tuzzle/vue

Vue 3 bindings for Tuzzle media: a plugin, an image component, and composables built on @tuzzle/url.

bun add @tuzzle/vue @tuzzle/url vue

Usage

Register the plugin:

import { tuzzlePlugin } from '@tuzzle/vue'
import { createApp } from 'vue'
import App from './App.vue'

createApp(App)
  .use(tuzzlePlugin({ cdnUrl: 'https://cdn.tzzl.io', space: 'acme' }))
  .mount('#app')

Use the component (no SFC required, it's a render-function component):

<script setup lang="ts">
import { TuzzleImage, useTuzzleImage, useUpload } from '@tuzzle/vue'

const hero = useTuzzleImage('photos/hero.jpg', { width: 1200, format: 'webp' })
const { upload, status, progress } = useUpload()
</script>

<template>
  <TuzzleImage src="users/42.jpg" :width="96" :height="96" resize="fill" gravity="face" alt="avatar" />
  <img :src="hero" >
</template>

useTuzzle() returns { url, image, config }. useTuzzleImage() returns a ComputedRef<string> and accepts refs, getters, or plain values.