Skip to content
Branch: dev
Clone or download
Pull request Compare This branch is 21 commits behind fritx:dev.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.




Live Demo & Documentation:

Docs is powered by At-UI.

  • Chrome/Firefox/Edge/IE9~IE11
  • Plain-text based, no jQuery, no extra nodes
  • ContentEditable/Textarea
  • Avatars, custom templates
  • Vue2/Vue1

See also: react-at


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.

npm i vue-at@2.x  # for Vue2  <----
npm i vue-at@1.x  # for Vue1 (branch vue1-legacy)
npm i vue1-at  # for Vue1 (branch vue1-new)
  <at :members="members">
    <div contenteditable></div>

import At from 'vue-at'

export default {
  components: { At },
  data () {
    return {
      members: ['Roxie Miles', 'grace.carroll', '小浩']

#app .atwho-view { /* more */ }
#app .atwho-ul { /* more */ }

Using V-Model (Recommended)

Notice that <editor v-model> could be buggy,
and should be like <at v-model><editor></at> instead.

<at v-model="html">
  <div contenteditable></div>

<at-ta v-model="text">



// import At from 'vue-at' // for content-editable
import AtTa from 'vue-at/dist/vue-at-textarea' // for textarea

export default {
  components: { AtTa }
npm i -S textarea-caret  # also, for textarea

Custom Templates

Custom List

  <at :members="members" name-key="name">
    <template slot="item" scope="s">
      <img :src="s.item.avatar">
      <span v-text=""></span>
    <div contenteditable></div>

// ...
members: [{
  avatar: '',
  name: ''
}, {
  avatar: '',
  name: '椿木'

#app .atwho-li { /* more */ }
#app .atwho-li img { /* more */ }
#app .atwho-li span { /* more */ }

Custom List with Vue 1.x

There is no "scoped slot" feature in Vue 1.
Use a "normal slot" with data- attribute instead.

<!-- vue1-at for vue@1.x -->
<template slot="item">
  <img data-src="item.avatar">
  <span data-text=""></span>

Custom Tags

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

<span slot="embeddedItem" slot-scope="s">
  <span class="tag"><img :src="s.current.avatar">{{ }}</span>
You can’t perform that action at this time.