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

🚀 Install

With npm (recommended)

npm install editor-vue3

With CDN

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/editor-vue3.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/editor-vue3.min.js"></script>

🧩 Usage

Basic usage (npm / bundler)

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):

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:

<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:

<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