@aspicio/vue

@aspicio/vue

Vue 3 bindings for the Aspicio DXF and PDF viewer — thin veneers over the framework-neutral @aspicio/elements web components, so Vue, React, Svelte, and plain-HTML embeds share one implementation and one look (pixel-identical, verified). Try the viewer live at aspicio.frontsail.app.

npm install @aspicio/vue vue three   # @aspicio/core and @aspicio/elements come along; vue 3.4+ and three (>=0.184) are peers

• <AspicioEmbed> — batteries included: layer list + interactive preview in one component.
• <AspicioPreview> — the embeddable canvas alone: pan/zoom/rotate (mouse and multi-touch), animated fit, batched WebGL rendering. No chrome. Bind @hover-layer to hit-test the layer under the cursor.
• <AspicioLayerPanel> — the ready-made layer list, identical to the demo app: header with layer count, visibility checkboxes, effective-color swatches, entity counts, hover-to-highlight, double-click-to-solo (with a banner), and a gesture-hints footer. theme="none" renders a minimal list.

One component

<script setup>
import { AspicioEmbed } from "@aspicio/vue";
import "@aspicio/vue/formats/dxf";

const onLoaded = ({ layers, stats }) => console.log(stats.entityCount);
</script>

<template>
  <!-- src also accepts File | Blob | ArrayBuffer | DXF text via :src -->
  <AspicioEmbed src-url="/drawing.dxf" style="height: 480px" @loaded="onLoaded" />
</template>

Props: src, src-url, panel (left | right | none), theme (aspicio | none), panel-style, options, show-download, shortcuts. Emits: loaded, load-error, viewer-change, hover-layer — payloads arrive unwrapped (no CustomEvent.detail digging).

The full viewer

The template ref exposes the complete DrawingViewer — fitView, zoomBy, setLayerVisible, pickLayer, view, toSVG, toPNG:

<script setup>
import { shallowRef, useTemplateRef } from "vue";

const embed = useTemplateRef("embed");
const fit = () => embed.value?.viewer?.fitView();
</script>

<template>
  <AspicioEmbed ref="embed" src-url="/drawing.dxf" />
</template>

Prefer shallowRef when storing the viewer from @viewer-change — the components unwrap reactive proxies defensively, but a deeply reactive viewer buys nothing and costs proxy overhead.

Custom layout

Compose AspicioPreview + AspicioLayerPanel yourself and hand the panel the viewer from @viewer-change; reverse-highlight-layer wires canvas-hover to the row highlight (the embed does this automatically).

Theming

The internals render in shadow DOM. Theme through --aspicio-* CSS custom properties and ::part() hooks — see the @aspicio/elements README for the token and part list. The theme uses IBM Plex font stacks but never loads webfonts itself; load IBM Plex Sans/Mono in your page for the exact demo look.

Notes

• Changing src / src-url loads the new document; the most recently set source wins, and stale in-flight loads are ignored.
• shortcuts keys are scoped to the focused embed (click it first): F fit, +/- zoom, R reset rotation, A show all layers.
• SSR-safe (Nuxt): importing the package is fine in Node; the viewer is created only after client-side mount. See apps/vue-example for a full setup.

Migrating from 0.x

Two breaking changes ship together:

• Formats are opted into by import. Add import "@aspicio/vue/formats/dxf"; once — without it every load fails with an error saying exactly that.
• Format-neutral names dropped their Dxf prefix: <DxfEmbed> / <DxfPreview> / <DxfLayerPanel> → <AspicioEmbed> / <AspicioPreview> / <AspicioLayerPanel>, DxfTheme → AspicioTheme, and DxfViewer → DrawingViewer.