webledger-vue3-common

webledger-vue3-common

Common components which are used on vue3 projects

Installation

npm i webledger-vue3-common@latest

Publish package

npm publish

Usage

Load webledger-vue3-common and style in main.js/main.ts file

import { createApp } from "vue";
import App from "./App.vue";
import WLCommonComponent from 'webledger-vue3-common';
import "webledger-vue3-common/dist/style.css";

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

Editor component

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

If you want add mention option,

<script>
import { Editor } from "webledger-vue3-common";
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 "webledger-vue3-common";
const data = ref("")
</script>
<template>
 <Editor v-model="data" :toolbarToggle="true"/>
</template>