1.5.3 • Published 12h ago

@eternalheart/vue-file-preview

Licence

MIT

Version

1.5.3

Deps

Size

15.2 MB

Vulns

Weekly

Stars

Summary Dependency Versions

File Preview

English | 简体中文

A modern, feature-rich file preview component library with first-class support for both React and Vue. Preview images, videos, audio, PDFs, Office documents (Word, Excel, PowerPoint), Markdown, and code files — through a shared core and framework-specific bindings.

Key Features

Modern UI — Clean and modern interface with smooth animations
20+ Format Support — Images, videos, audio, PDF, Office, code, e-books, and more
Dual Display Modes — Full-screen modal or inline embedded preview
Multi-framework Support — React and Vue share core logic with consistent APIs
Full Interaction — Keyboard navigation, drag-and-drop, zoom/rotate, custom players

Documentation & Demos	Packages & Resources	Development & Contributing
• Full Documentation • React Demo • Vue Demo	• React Package • Vue Package • Issue Tracker	• Monorepo Structure • Dev Commands • Contributing Guide

Quick Start

React

npm install @eternalheart/react-file-preview

import { FilePreviewModal } from '@eternalheart/react-file-preview';
import '@eternalheart/react-file-preview/style.css';

<FilePreviewModal
  files={[file]}
  currentIndex={0}
  isOpen={true}
  onClose={() => setIsOpen(false)}
/>

View React Full Documentation | Live Demo

Vue

npm install @eternalheart/vue-file-preview

<script setup>
import { FilePreviewModal } from '@eternalheart/vue-file-preview';
import '@eternalheart/vue-file-preview/style.css';
</script>

<template>
  <FilePreviewModal
    :files="[file]"
    :current-index="0"
    :is-open="true"
    @close="isOpen = false"
  />
</template>

View Vue Full Documentation | Live Demo

Package Overview

Package	Description	Version	Documentation
@eternalheart/react-file-preview	React component library		README
@eternalheart/vue-file-preview	Vue 3 component library		README
file-preview-core	Framework-agnostic core	Internal	-

Supported Formats

Type	Formats	Key Features
Images	JPG, PNG, GIF, WebP, SVG, BMP, ICO, AVIF, HEIC	Zoom (0.1x-10x), rotate, drag, mouse wheel zoom
Videos	MP4, WebM, OGG, MOV, AVI, MKV, M4V, 3GP, FLV	Custom player, progress control, volume adjustment, fullscreen
Audio	MP3, WAV, OGG, M4A, AAC, FLAC	Custom player, progress bar, volume control, skip forward/backward
Documents	PDF, DOCX, XLSX, PPTX/PPT	Pagination, zoom, slide preview, spreadsheet view
Code	JS, TS, Python, Java, C++, Go, Rust, and 40+ languages	Syntax highlighting, theme support, line numbers
Subtitles	SRT, WebVTT, LRC, ASS/SSA, TTML/DFXP	Timeline parsing, metadata extraction, structured display
Others	Markdown, CSV, JSON, XML, ZIP, MSG, EPUB, Fonts	Rendering, formatting, tree view, character set preview

View complete format list and examples

Project Architecture

This project uses a pnpm workspace monorepo architecture:

file-preview/
├── packages/
│   ├── file-preview-core/     # Framework-agnostic core (types, detection, parsers)
│   ├── react-file-preview/    # React bindings → @eternalheart/react-file-preview
│   ├── vue-file-preview/      # Vue bindings → @eternalheart/vue-file-preview
│   ├── example/               # React demo app (deployed to GitHub Pages)
│   ├── vue-example/           # Vue demo app (deployed to GitHub Pages /vue)
│   └── docs/                  # VitePress documentation site
└── openspec/                  # OpenSpec change records

Development Guide

Install Dependencies

pnpm install

Development Commands

# Start dev servers
pnpm dev              # React demo
pnpm dev:vue          # Vue demo
pnpm dev:docs         # Documentation site

# Build
pnpm build            # Build all packages
pnpm build:lib        # Build library only
pnpm build:example    # Build examples only

# Preview builds
pnpm preview:example  # Preview example build
pnpm preview:docs     # Preview docs build

# Deploy and publish
pnpm deploy           # Deploy examples and docs to GitHub Pages
pnpm pub              # Publish library to npm

Contributing

Fork this repository
Create a feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'feat: add amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Submit a Pull Request

Read full contributing guide

Custom Renderers

Support custom renderers for file types not built-in.

React Example:

import { FilePreviewModal } from '@eternalheart/react-file-preview';

const customRenderers = [
  {
    test: (file) => file.type === 'application/custom',
    component: ({ url }) => <div>Custom render: {url}</div>
  }
];

<FilePreviewModal files={files} customRenderers={customRenderers} />

Vue Example:

<script setup>
import { FilePreviewModal } from '@eternalheart/vue-file-preview';

const CustomRenderer = {
  props: ['url'],
  template: '<div>Custom render: {{ url }}</div>'
};

const customRenderers = [
  {
    test: (file) => file.type === 'application/custom',
    component: CustomRenderer
  }
];
</script>

<template>
  <FilePreviewModal :files="files" :custom-renderers="customRenderers" />
</template>