vue-at

- [x] Chrome / Firefox / Edge / IE9~IE11
- [x] Plain-text based, no jQuery, no extra nodes
- [x] Content-Editable / Textarea
- [x] Avatars, custom templates
- [x] Vue3 / Vue2 / Vue1
- [x] Vuetify / Element UI / Element Plus
- [ ] Vue-CLI migration
- [ ] Vite migration

Playground: https://we-demo.github.io/vue-at-vite-app/

Vue3 Docs: https://github.com/fritx/vue-at/tree/vue3#readme

Vue2 Docs: https://fritx.github.io/vue-at/ or see below

See also: react-at

Motivation

At.js is awesome, but:

- It is based on jQuery and jQuery-Caret.
- It introduces extra node wrappers.
- It could be unstable on content edit/copy/paste.

Finally I ended up creating this.

If you're using Vue3, read branch vue3 instead.

``plain
npm i vue-at@next # for Vue3 (branch vue3)
npm i vue-at@2.x # for Vue2 (branch vue2)
npm i vue-at@1.x # for Vue1 (branch vue1-legacy)
npm i vue1-at # for Vue1 (branch vue1-new)
`

`vue



`

Using V-Model (Recommended)

With Content-Editable, v-model should be bound in container.

With Textarea, v-model should be bound in <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> itself.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">vue<br /><at v-model="html"><br /> <div contenteditable></div><br /></at></p><p class="my-3"><at-ta><br /> <textarea v-model="text">

`

Textarea

`vue



`

`plain
npm i -S textarea-caret # also, for textarea
`

Custom Templates

$3

`vue



`

#### Custom List with Vue 1.x

There is no "scoped slot" feature in Vue 1.

Use a "normal slot" with data- attribute instead.

`vue


`

$3

This gives you the option of changing the style of inserted tagged items. It is only supported for ContentEditable version, not Textarea.

`vue

{{ s.current.name }}





`

Used with 3rd-party libraries

$3

`vue




`

$3

`vue




``