@vizel/vue

Vue 3 components and composables for Vizel block-based Markdown editor.

Installation

npm install @vizel/vue

Requirements

• Vue 3.4+

Usage

Basic Setup

<script setup lang="ts">
import { Vizel } from "@vizel/vue";
import "@vizel/core/styles.css";
</script>

<template>
  <Vizel placeholder="Type '/' for commands..." />
</template>

With Editor Control

<script setup lang="ts">
import { VizelEditor, VizelBubbleMenu, useVizelEditor } from "@vizel/vue";
import "@vizel/core/styles.css";

const editor = useVizelEditor({
  features: {
    image: { onUpload: async (file) => "https://example.com/image.png" },
  },
});
</script>

<template>
  <VizelEditor :editor="editor" />
  <VizelBubbleMenu v-if="editor" :editor="editor" />
</template>

Markdown Import/Export

<script setup lang="ts">
import { useVizelEditor, useVizelMarkdown } from "@vizel/vue";

const editor = useVizelEditor();
const { markdown, setMarkdown } = useVizelMarkdown(() => editor.value);
</script>

Components

| Component | Description | |-----------|-------------| | Vizel | All-in-one editor with bubble menu and optional toolbar | | VizelEditor | Editor component | | VizelBubbleMenu | Floating formatting toolbar | | VizelBubbleMenuDefault | Default bubble menu layout | | VizelBubbleMenuButton | Bubble menu button | | VizelBubbleMenuDivider | Bubble menu divider | | VizelBubbleMenuColorPicker | Bubble menu color picker | | VizelSlashMenu | Slash command menu | | VizelSlashMenuItem | Slash command menu item | | VizelSlashMenuEmpty | Slash command empty state | | VizelBlockMenu | Block context menu (drag handle click) | | VizelToolbar | Fixed toolbar | | VizelToolbarDefault | Default toolbar layout | | VizelToolbarButton | Toolbar button | | VizelToolbarDivider | Toolbar divider | | VizelToolbarDropdown | Toolbar dropdown button | | VizelToolbarOverflow | Toolbar overflow menu | | VizelMentionMenu | @mention suggestion menu | | VizelLinkEditor | Link editing popover | | VizelNodeSelector | Node type selector | | VizelColorPicker | Color picker | | VizelFindReplace | Find and replace panel | | VizelSaveIndicator | Auto-save status indicator | | VizelEmbedView | Embed content viewer | | VizelIcon | Icon component | | VizelIconProvider | Custom icon provider | | VizelThemeProvider | Theme provider | | VizelProvider | Editor context provider | | VizelPortal | Portal component |

Composables

| Composable | Description | |------------|-------------| | useVizelEditor | Create and manage editor instance | | useVizelEditorState | Track editor state changes | | useVizelState | Trigger reactivity on editor updates | | useVizelMarkdown | Two-way Markdown synchronization | | useVizelAutoSave | Auto-save to localStorage or custom backend | | useVizelCollaboration | Real-time collaboration management | | useVizelComment | Comment and annotation management | | useVizelVersionHistory | Document version history | | useVizelContext | Access editor from context | | useVizelContextSafe | Access editor from context (returns null outside provider) | | useVizelTheme | Access theme from context | | useVizelIconContext | Access icon context |

Documentation

See the main repository for full documentation.

License

MIT