npm package: @json-canvas-viewer/vue
Description: An extensible web-based viewer for JSON Canvas in the form of a Vue component, easy to embed into websites.
Author: Hēsperus
Latest version: 1.0.2

<h1 align="center">
    <img src="../../assets/logo.svg" alt="JSON Canvas Viewer logo" width="280px">
    <br />
    JSON Canvas Viewer Vue
    <br />
</h1>

<h4 align="center">JSON Canvas Viewer as a Vue component</h4>

<p align="center">
    <a href="https://github.com/hesprs/json-canvas-viewer/wiki">
        <strong>Documentation</strong>
    </a> • 
    <a href="https://www.npmjs.com/package/json-canvas-viewer">
        <strong>Vanilla</strong>
    </a> • 
    <a href="https://www.npmjs.com/package/vite-plugin-json-canvas">
        <strong>Vite Plugin</strong>
    </a> • 
    <a href="https://www.npmjs.com/package/@json-canvas-viewer/react">
        <strong>React Component</strong>
    </a> • 
    <strong>Vue Component</strong> • 
    <a href="https://www.npmjs.com/package/@json-canvas-viewer/preact">
        <strong>Preact Component</strong>
    </a>
</p>

## ✏️ Description

This is the Vue component of JSON Canvas Viewer, it wraps around the vanilla viewer class to provide a seamless integration with Vue. This package additionally re-exports everything from the core package, so you do not need to install the core package separately.

Install this package if you want to use JSON Canvas Viewer in a **Vue** project. If you are not using it, please head to the corresponding package in the navigation bar above.

## 📦 Installation

Install with your favorite package manager:

```bash
npm add @json-canvas-viewer/vue

# or
pnpm add @json-canvas-viewer/vue

# or
yarn add @json-canvas-viewer/vue

# or
bun add @json-canvas-viewer/vue
```

Now you have two options: **build-time** canvas parsing or **client-side** canvas parsing.

### Build-time Canvas Parsing

This is the recommended way to parse canvas data, it will result in significantly smaller bundle size and faster load times.

Firstly, you need a bundler. JSON Canvas Viewer currently supports [Vite](https://vitejs.dev/) only. Please install [Vite Plugin](https://www.npmjs.com/package/vite-plugin-json-canvas) and setup it.

After bundler setup, you can directly import a canvas file and use it in viewer instantiation:

```vue
<script setup>
import { JSONCanvasViewerComponent } from '@json-canvas-viewer/vue';
import canvas from 'path/to/your.canvas';
</script>

<template>
  <Suspense>
    <!-- Suspense is crucial -->
    <JSONCanvasViewerComponent :canvas="canvas" />
  </Suspense>
</template>
```

### Client-side Canvas Parsing

This method doesn't require any bundler setup. You just need to import the parser and fetch the canvas file:

```vue
<script setup>
import { JSONCanvasViewerComponent, fetchCanvas, parser } from '@json-canvas-viewer/vue';
</script>

<template>
  <Suspense>
    <!-- Suspense is crucial -->
    <JSONCanvasViewerComponent
      :canvas="await fetchCanvas('path/to/your.canvas')"
      :options="{ parser }"
    />
  </Suspense>
</template>
```

Refer to the [documentation](https://github.com/hesprs/json-canvas-viewer/wiki/) for more details.

## 📝 Copyright & License

Copyright ©️ 2025-2026 Hesprs (Hēsperus) | [MIT License](https://mit-license.org/)