JP-Common-Component

Common commponet which are used on vue3 projects

Installation

npm install jp-common-component@latest

Usage

Load jp-common-commponent and style in main.js/main.ts file

import { createApp } from "vue";
import App from "./App.vue";
import JpCommonComponent from 'jp-common-component';
import "jp-common-component/dist/style.css";

const app = createApp(App)
app.use(JpCommonComponent);
app.mount("#app");

Editor component

<script>
import { Editor } from "jp-common-component";
const data = ref("")
</script>
<template>
 <Editor v-model="data" />
</template>

If you want add mention option,

<script>
import { Editor } from "jp-common-component";
const data = ref("")
const items = [ '@Barney', '@Lily', '@Marry Ann', '@Marshall', '@Robin', '@Ted' ];
</script>
<template>
 <Editor v-model="data" :mentions="items" />
</template>

If you want hide toolbar,

<script>
import { Editor } from "jp-common-component";
const data = ref("")
</script>
<template>
 <Editor v-model="data" :toolbarToggle="true"/>
</template>