https://github.com/Akryum/vue-mention

Mention component for Vue.js
https://github.com/Akryum/vue-mention

mention suggestion vuejs

Last synced: about 1 month ago
JSON representation

Mention component for Vue.js

• Host: GitHub
• URL: https://github.com/Akryum/vue-mention
• Owner: Akryum
• License: mit
• Created: 2020-04-15T16:19:44.000Z (over 4 years ago)
• Default Branch: next
• Last Pushed: 2022-12-15T16:06:39.000Z (almost 2 years ago)
• Last Synced: 2024-07-07T18:44:47.754Z (2 months ago)
• Topics: mention, suggestion, vuejs
• Language: Vue
• Homepage: https://vue-mention.netlify.app/
• Size: 2.69 MB
• Stars: 516
• Watchers: 5
• Forks: 53
• Open Issues: 47
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        


  

    

  





  

    

  

  

    

  



# vue-mention

Mention popper for input and textarea

[Documentation](https://vue-mention.netlify.app/)

## Vue 3 support

Install the v2 for Vue 3 support:

```

pnpm i vue-mention@next

```

You also need to install `floating-vue`:

```

pnpm i floating-vue

```

And add the default `floating-vue` styles:

```js

import 'floating-vue/dist/style.css'

```

## floating-vue 1 (Vue 2)

Install the special version for floating-vue v1 (for Vue 2) support:

```

pnpm i [email protected]

```

**:warning: Use the exact version range `1.0.0-floating-vue1` otherwise you'll install `v1.1.0` which is for v-tooltip 2.**

You also need to install `floating-vue` v1:

```

pnpm i floating-vue@vue2

```

And add the default `floating-vue` styles:

```js

import 'floating-vue/dist/style.css'

```

## Sponsors



  

    

  



## Quick start

```vue

import { Mentionable } from 'vue-mention'

const users = [

  {

    value: 'akryum',

    firstName: 'Guillaume',

  },

  {

    value: 'posva',

    firstName: 'Eduardo',

  },

  {

    value: 'atinux',

    firstName: 'Sébastien',

  },

]

const issues = [

  {

    value: 123,

    label: 'Error with foo bar',

    searchText: 'foo bar'

  },

  {

    value: 42,

    label: 'Cannot read line',

    searchText: 'foo bar line'

  },

  {

    value: 77,

    label: 'I have a feature suggestion',

    searchText: 'feature'

  }

]

export default {

  components: {

    Mentionable,

  },

  data () {

    return {

      text: '',

      items: [],

    }

  },

  methods: {

    onOpen (key) {

      this.items = key === '@' ? users : issues

    },

  },

}

  

    

    

      


        No result

      

    


    

      


        {{ item.value }}

        

          ({{ item.firstName }})

        

      

    


    

      


        

          #{{ item.value }}

        

        

          {{ item.label }}

        

      

    

  


```