open-index/open-npm huggingface dataset:
npm package: @jitword/editor-vue
Description: Vue integration for the PxDoc editor
Latest version: 1.0.1

# PxDoc Editor Vue

Vue integration for the PxDoc editor.

## Installation

```bash
npm install @px-doc/editor-vue
```

## Usage

### As a Vue Plugin

```javascript
import { createApp } from 'vue';
import PxEditor from '@px-doc/editor-vue';

const app = createApp(App);
app.use(PxEditor);
```

### Direct Component Import

```vue
<template>
  <div>
    <PxEditor 
      v-model="content" 
      :editable="true"
      :autofocus="true"
    />
    <div v-html="content"></div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { PxEditor } from '@px-doc/editor-vue';

const content = ref('<p>Hello world!</p>');
</script>
```

### With Custom Extensions

```vue
<template>
  <PxEditor 
    v-model="content" 
    :extensions="extensions"
  />
</template>

<script setup>
import { ref, shallowRef } from 'vue';
import { PxEditor } from '@px-doc/editor-vue';
import Bold from '@tiptap/extension-bold';
import Italic from '@tiptap/extension-italic';

const content = ref('<p>Hello world!</p>');
const extensions = shallowRef([Bold, Italic]);
</script>
```

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| modelValue | string | '' | Initial content (supports v-model) |
| editable | boolean | true | Whether the editor is editable |
| autofocus | boolean | false | Whether to autofocus the editor |
| extensions | array | [] | Custom extensions to add |

## Events

| Event | Parameters | Description |
|-------|------------|-------------|
| update:modelValue | content: string | Emitted when content changes |

## Browser Support

The Vue package works in all modern browsers that support ES2018+ and Vue 3.

## License

MIT