Docs · Framework guides

Vue

A single-file component with a watcher that restarts playback on state change.

Export from Ship

Pick Vue on the Ship screen and download the component. The standalone file inlines the frames, so it needs no dependency, and its watcher restarts playback whenever state changes.

vue

<Breathe :state="status" />

Breathe

Use the package

The flickering-dots element works in Vue templates. Ship's package option writes a component around it with your set embedded. To use it yourself, register it once the component mounts, and tell the Vue compiler that flickering-dots is a custom element.

vue

<script setup lang="ts">
import { onMounted } from 'vue';
import { defineDotsElement } from 'flickering-dots/element';

defineProps<{ status: string }>();
onMounted(() => defineDotsElement());
</script>

<template>
  <flickering-dots set="breathe" :state="status" size="28"></flickering-dots>
</template>

import vue from '@vitejs/plugin-vue';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [
    vue({
      template: { compilerOptions: { isCustomElement: (tag) => tag === 'flickering-dots' } },
    }),
  ],
});