Comments (9)
jesuskinto
commented on September 14, 2024
1
I was able to get it working properly by following the steps in the Nuxt plugin guide 🥳.
npm install --save v-tooltip
We create the file plugins/vue-tooltips.js:
import Vue from 'vue'
import VTooltip from 'v-tooltip'
Vue.use(VTooltip)
Then we add the file path inside the plugins key of our nuxt.config.js:
export default {
plugins: ['@/plugins/vue-tooltip.js']
}
from vue-mention.
Akryum
commented on September 14, 2024
Did you setup v-tooltip?
Le sam. 20 juin 2020 à 07:09, Nony Bright O <[email protected]> a
écrit :
… Great plugin! I am having issues making it work on nuxt. I have tried
implementing it as a plugin too but it doesn't work. I have also installed
v-tooltip. Nothing shows up when I type in the @ symbol.
*plugins/vue-mention.js*
import Vue from 'vue'
import { Mentionable } from 'vue-mention'
Vue.component('Mentionable', Mentionable)
*nuxt.config.js*
plugins: [
{ src: '~plugins/vue-mention', ssr: false }
]
*component.vue*
<template>
<div>
<Mentionable :keys="['@']" :items="items" offset="6">
<textarea v-model="text" />
</Mentionable>
</div>
</template>
<script>
import { Mentionable } from 'vue-mention'
export default {
components: {
Mentionable
},
data() {
return {
text: '',
items: [
{
value: 'cat',
label: 'Mr Cat'
},
{
value: 'dog',
label: 'Mr Dog'
}
]
}
}
}
</script>
—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
<#10>, or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AAVLE7GFLOP5JKSV7TT4XUDRXRAAFANCNFSM4ODHF7PA>
.
from vue-mention.
nonybrighto
commented on September 14, 2024
@Akryum I installed v-tooltip. It gave a warning to install v-tooltip and the warning cleared after I did but nothing changed.
from vue-mention.
amdp
commented on September 14, 2024
Hi, I am on nuxt and I can actually mention (https://pasteboard.co/Jms7UjS.png) but I cannot see the tooltip, even if its state is open, even if I change the background-color and the z-index.
from vue-mention.
quanghm27
commented on September 14, 2024
Hi, I am on nuxt and I can actually mention (https://pasteboard.co/Jms7UjS.png) but I cannot see the tooltip, even if its state is open, even if I change the background-color and the z-index.
Did you install v-tooltip ?
from vue-mention.
amdp
commented on September 14, 2024
yes of course!
from vue-mention.
amdp
commented on September 14, 2024
Ok I have an issue with v-tooltip, not with vue-mention 😄
from vue-mention.
amdp
commented on September 14, 2024
Ok, solved. I have a problem now, if I type \ it crashes interpreting it as a regexp.
Do you want me to create a new issue for it?
from vue-mention.
Rohan-Jalil
commented on September 14, 2024
@Akryum I'm trying to integrate it in a nuxt project. My nuxt version is 2.14.6. I'm also using bootstrap vue but the popover doesn't show up, I've tried applying styles too but it doesn't seem to work.
from vue-mention.
Related Issues (20)
- How to hide popup if no results? HOT 3
- Does not work with Vuetify. HOT 1
- TypeScript support HOT 3
- nextTick must be there by default
- export 'VPopover' was not found in 'v-tooltip' HOT 1
- Search interrupted after hit "space" HOT 4
- Removing all character after `keys` do not reset the state of the items HOT 2
- Styling the mentioned items HOT 2
- When mention contains '@' and we start to add another mention but delete it before choosing the popover doesn't close HOT 2
- Emit event when removing a mention HOT 3
- Add info in docs on how to use item-@ without causing invalid attribute error HOT 1
- After selection @ tooltip doesn't show. need space + @
- Wrong position in Electron 19 and 21
- Does :positioning-disabled do anything anymore? HOT 1
- Can I have a label instead of value display ?
- Is there a way to control the visibility manually also?
- Trigger suggestion with CTRL + Space
- Got @undefined in Vue3
- Floating Vue Error. HOT 1
- Click @ only shows 8 item in the list, whereas i have 36 HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-mention.