@tuzzle/vue

@tuzzle/vue provides Vue 3 components and composables built on @tuzzle/url and @tuzzle/chooser. Components are render-function based, so there are no .vue SFCs to compile.

npm install @tuzzle/vue

Plugin

Install the plugin with your CDN host and space.

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

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

TuzzleImage

<script setup>
import { TuzzleImage } from '@tuzzle/vue'
</script>

<template>
  <TuzzleImage src="image-01HQ..." :width="400" :height="300" format="webp" :quality="80" alt="Cover" loading="lazy" />
</template>

Choosing files

TuzzleChooser supports v-model:open; TuzzleChooserButton is a ready-made trigger. Both accept every @tuzzle/chooser option.

<script setup>
import { TuzzleChooser, TuzzleChooserButton } from '@tuzzle/vue'
import { ref } from 'vue'

const open = ref(false)
function onSelect(assets) {
  insert(assets)
}
</script>

<template>
  <TuzzleChooserButton space="a1b2c3" cdnUrl="https://cdn.tzzl.io" @select="onSelect" />
  <TuzzleChooser v-model:open="open" space="a1b2c3" cdnUrl="https://cdn.tzzl.io" @select="onSelect" />
</template>

Composables

<script setup>
import { useTuzzleImage } from '@tuzzle/vue'

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