vue1-at

Notice: this is Vue 1.x version of vue-at

npm i [email protected]  # for Vue2
npm i [email protected]  # for Vue1 (legacy)
npm i vue1-at  # for Vue1  <----

<template>
  <at :members="members">
    <div contenteditable></div>
  </at>
</template>

<script>
import At from 'vue1-at'

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

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

Textarea

<template>
  <at-ta>
    <textarea></textarea>
  </at-ta>
</template>

<script>
// import At from 'vue1-at' // for content-editable
import AtTa from 'vue1-at/dist/vue-at-textarea' // for textarea

export default {
  components: { AtTa }
}
</script>

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

Custom Templates with Vue 1.x

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

<!-- vue1-at for [email protected] -->
<template slot="item">
  <img data-src="item.avatar">
  <span data-text="item.name"></span>
</template>