# Editor-Vue3

[![npm version](https://img.shields.io/npm/v/editor-vue3.svg)](https://www.npmjs.com/package/editor-vue3) [![npm downloads](https://img.shields.io/npm/dm/editor-vue3.svg)](https://www.npmjs.com/package/editor-vue3) [![Vue 3 Compatible](https://img.shields.io/badge/vue-3.x-brightgreen.svg)](https://vuejs.org/) [![Types Included](https://img.shields.io/npm/types/editor-vue3.svg)](https://www.npmjs.com/package/editor-vue3) [![](https://data.jsdelivr.com/v1/package/npm/editor-vue3/badge?style=rounded)](https://www.jsdelivr.com/package/npm/editor-vue3)

💡 A lightweight Vue 3 wrapper for jQuery Select2 with Bootstrap 5.
Support for CDN or bundled usage, v-model binding, custom events, async search, Vuex, and full TypeScript support. And more!

---


## 🖼️ Preview

![Editor-Vue3 Preview](https://ckeditor.com/assets/images/og/ogimage-vue-editor-dd62c3c569.png)

---



## 🚀 Install

### With npm (recommended)

```bash
npm install editor-vue3
```

### With CDN

```bash
<link href="https://cdn.jsdelivr.net/npm/editor-vue3@0.0.1/dist/editor-vue3.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/editor-vue3@0.0.1/dist/editor-vue3.min.js"></script>
```

## 🧩 Usage

### Basic usage (npm / bundler)
```bash
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import EditorVue3 from 'editor-vue3'
import 'editor-vue3/dist/editor-vue3.css'

const app = createApp(App)

app.use(EditorVue3)
app.mount('#app')
```

Or for TypeScript when build (Tested in Vite when using `npm run build`):

```bash
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import {EditorVue3} from 'editor-vue3'
import 'editor-vue3/dist/editor-vue3.css'

const app = createApp(App)

// app.use(EditorVue3)
app.component('EditorVue3', EditorVue3)
app.mount('#app')
```


Now use in your any components:

```bash
<template>
  <EditorVue3
    id="editor"
    name="editor"
    v-model="contents"
    placeholder="Pilih Satu Data..."
/>
</template>

<script setup>
import { ref } from 'vue'

const contents = ref(null)
</script>
```

Or you can use TypeScript:

```bash
<template>
  <EditorVue3
    id="editor"
    name="editor"
    v-model="contents"
  />
/>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  name: 'HelloWorld',
  setup() {
    const contents = ref('')

    return {
      contents,
    }
  }
})
</script>
```


## 🚀 About Me
I'm a full stack developer...


## Authors

- [@ryuhiro](https://www.github.com/ryuhiro)