@rhapsodic/vuewer

@rhapsodic/vuewer

Image viewer for Vue 3 applications.

Features

• 💪  Type safe integration of Vuewer into your project
• ✨  Viewing multiple or a single image
• 🕹️  A useVuewer() composable to access all of vuewer methods.

Installation

With pnpm

pnpm add @rhapsodic/vuewer

Or, with npm

npm install @rhapsodic/vuewer

Or, with yarn

yarn add @rhapsodic/vuewer

Or, with bun

bun add @rhapsodic/vuewer

Usage

Import @rhapsodic/vuewer/style.css

import { createApp } from 'vue'
import '@rhapsodic/vuewer/style.css'

import App from './App.vue'

createApp(App).mount('#app')

<script setup>
import { useVuewer } from '@rhapsodic/vuewer'

const { open } = useVuewer({
  images: [
    {
      url: 'https://placehold.net/2.png',
      thumbUrl: 'https://placehold.net/3.png',
    },
    'https://placehold.net/5-600x800.png',
  ],
})
</script>

<template>
  <button @click="open">
    Open Vuewer
  </button>
</template>

images supports both raw strings and objects with thumbnail overrides: string | { url: string, thumbUrl?: string }.

Development

pnpm install
pnpm dev
pnpm test
pnpm typecheck
pnpm build
pnpm build:playground

License

MIT License