I'm trying to implement v-tooltip https://www.npmjs.com/package/v-tooltip in my Vue app in its own component but it's currently not doing anything when I hover the element and I don't get any console errors, I don't know if I'm implementing it correctly and would appreciate any help I can get.
In the same application, I have created a component called TooltipBoot.vue where I'm using the bootstrap tooltip, and this one is working just fine, so I tried to do a similar setup with v-tooltip, but v-tooltip is not working at all.
Here is my TooltipBoot.vue component that works:
<template>
<span v-b-tooltip ="{ title: content, placement: position, trigger: action, variant: theme}">
<slot></slot>
</span>
</template>
<script>
import { VBTooltip } from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
export default {
name: 'TooltipBoot',
directives: {
'b-tooltip': VBTooltip,
},
props: {
position: String,
content: String,
action: String,
theme: String
},
};
</script>
Then I import and use my component in other places:
<tooltip-boot content="Hello" position="top" theme="danger">Hover me</tooltip-boot>
So I tried to do something similar using v-tooltip, this is my VTooltip.vue component:
<template>
<span v-tooltip ="{ content: content}">
<slot></slot>
</span>
</template>
<script>
import { VTooltip } from 'v-tooltip'
export default {
name: 'VTooltip',
directives: {
'tooltip': VTooltip,
},
props: {
content: String,
},
};
</script>
And then I try to use the component:
<v-tooltip content="Hello Tooltip">Hover me </v-tooltip>
but nothing happens when I hover the text, am I missing anything? Or is this not the way to implement this package? Thank you!
I got this tooltip working and forgot to update my question here, the solution was a lot easier than I thought, I just had to add the Sass styles to my component, which can be found at the bottom in the documentation https://www.npmjs.com/package/v-tooltip
Related
I am developing an app which has a list of objects that I want to paginate. I found vuejs-paginate plugin but I can't make it work in my view.
After installing it via npm and importing in the view, its tag is in fact in the HTML skeleton of the page, but it shows nothing. No error is displayed in the console either, only this Vue warning:
[Vue warn]: Failed to resolve component: paginate
Might it be a problem with the import? Could you help me?
I attach part of my code so you can see how I've declared it.
<template>
<ion-page>
<ion-content>
<paginate
:pageCount="10"
:containerClass="'pagination'"
:clickHandler="clickCallback"
>
</paginate>
</ion-content>
</ion-page>
</template>
<script>
import {
IonContent,
IonPage,
} from "#ionic/vue";
import { defineComponent } from "vue";
import { VuejsPaginate } from "vuejs-paginate";
export default defineComponent({
name: "Gestion",
components: {
'paginate': VuejsPaginate,
},
methods: {
clickCallback: function(page) {
console.log(page)
},
});
</script>
This has also happened to me when trying to import other "external" components. Could it be a problem related to Ionic?
Thank you in advance!
I'm new to Vue and I don't use Bootstrap often so please pardon my newbie question, I'm trying to create a Vue tooltip component, I've created one to behave the way I wanted using css, however, I'm running into some accessibility issues, so I decided to use the BootstrapVue tooltip instead, but I don't know how I would create this component with Bootstrap.
This is basically my Tooltip.vue component using css:
<template>
<div :class="`tooltip ${position}`">
<slot></slot>
<span class="tooltip-text">{{content}}</span>
</div>
</template>
<script>
export default {
name: 'Tooltip',
props: {
position: String,
content: String,
}
};
</script>
<style lang="scss">
.tooltip {
.......
</style>
Then I import and use my component in other places like this:
<tooltip position="right" content="Right tooltip">Hover me</tooltip>
And I have created a TooltipBootstrap.vue component wanting to have the same structure but using Bootstrap, but I don't know how that would go, here is what I started:
I npm installed bootstrap-vue
<template>
<div>
<button v-b-tooltip.hover.${position}="'${content}'"></button>
</div>
</template>
<script>
import VBTooltip from 'bootstrap-vue';
export default {
name: 'TooltipBootstrat',
components: {
VBTooltip,
},
props: {
position: String,
content: String,
}
};
</script>
I'm reading the bootstrap documentation: https://bootstrap-vue.org/docs/directives/tooltip, but I don't know if I'm using this the way it's supposed to be used, so I'm a little lost and would appreciate any help/advice, thanks!
BootstrapVue provide <b-tooltip> component and v-b-tooltip directive (preferred method from document). You can play around in the document.
In simple words, you can use v-b-tooltip directive on any element which is very convenient. but for <b-tooltip> component you have to set target to identify the target to active the tooltip.
So in your case you can do something like:
<template>
<div v-b-tooltip="{ title: content, placement: position }">
<slot></slot>
</div>
</template>
<script>
import { VBTooltip } from 'bootstrap-vue'
export default {
name: 'Tooltip',
directives: {
'b-tooltip': VBTooltip,
},
props: {
position: String,
content: String,
}
};
</script>
Am trying to display the v-progress-circular vuetify component when ag-grid is loading the rows, i have been following the ag-grid documentation but that doesn't seems to work. the ag-grid documentation for vue seems to be outdated so i don't know what to do. What i have done so far is the following:
TableProgress.vue
<template>
<v-progress-circular :value="20" color="primary" indeterminate>
</v-progress-circular>
</template>
<script>
export default {
name: 'TableProgress'
}
</script>
MyTable.vue (Relevant parts)
<template>
<ag-grid-vue
:grid-options="gridOptions"
class="ag-theme-material"
:frameworkComponents="frameworkComponents"
:loadingOverlayComponent="loadingOverlayComponent"
/>
</template>
<script>
import TableProgress from "./TableProgress";
export default{
data(){
return{
gridOptions: null,
frameworkComponents: null,
loadingOverlayComponent: null
}
},
beforeMount () {
this.frameworkComponents = {
tableProgress: TableProgress
}
this.gridOptions.loadingOverlayComponent = 'tableProgress'
this.loadingOverlayComponent = 'tableProgress'
},
}
</script>
What am i doing wrong here? Or is it that this simply doesn't work on vue?
I think the attribute is overlayLoadingTemplate in ag-grid instead of loadingOverlayComponent. Kindly visit ag-grid overlays to see how you can add loader to your ag-grid table
You import the TableProgress but you don't use it. You must add it in components.
<script>
import TableProgress from "./TableProgress";
export default {
components: {
TableProgress
},
//...
}
</script>
For some reason it is not working, is this correct?
Parent Component:
<achievement-post imgURL="../assets/ach1.jpg"></achievement-post>
<script>
import achievementPost from "../components/AchievementPost.vue";
// ...
</script>
Child component:
<template>
<img :src="imgURL" />
</template>
<script>
export default {
props: {
imgURL: String
},
// ...
}
</script>
When I hardcode the URL it works, so I'm not sure what is going on. Please help.
If you are using Webpack, there is no way for it to track the image module dependency with a string url prop, so it will not try and resolve it.
The solution is to require it with an expression.
A context is created if your request contains expressions, so the
exact module is not known on compile time.
Child component:
<template>
<img :src="require(`../assets/${imgURL}`)" />
</template>
<script>
export default {
props: {
imgURL: String
},
// ...
}
</script>
Parent component
<achievement-post imgURL="ach1.jpg"></achievement-post>
<script>
import achievementPost from "../components/AchievementPost.vue";
// ...
</script>
HTML attributes are case insensitive: You should avoid using capital letters in props names. Maybe it's the cause of your problem.
<achievement-post img_url="../assets/ach1.jpg"></achievement-post>
And
export default {
props: {
img_url: String
},
// ...
}
You can see it at the bottom of this page:
https://vuejs.org/2016/02/06/common-gotchas/
or at the top of this page:
https://v2.vuejs.org/v2/guide/components-props.html
I'm using Vue Onsen UI and trying to render a Vue single file component for each tab.
In the documentation here, they make use of template in a single page. Which is not very reusable. I want to be able to import custom component and render that.
Here is something that I'm trying to do which doesn't seem to work.
<template lang="html">
<v-ons-page>
<!-- top tab bar -->
<v-ons-tabbar position="top" :index="0">
<v-ons-tab label="Browse" page="TaskList">
</v-ons-tab>
<v-ons-tab label="Second">
</v-ons-tab>
</v-ons-tabbar>
</v-ons-page>
</template>
<script>
import TaskList from './TaskList';
export default {
template: '#main',
components: {
'task-list': TaskList,
},
};
</script>
<style lang="scss">
</style>
Can you suggest anything that I should try?
Instead of using tab objects that reference the components directly, use the :tabs property of the tabbar to set up the pages:
<template lang="html">
<v-ons-page>
<v-ons-tabbar position="top" :index="0" :tabs="tabs">
</v-ons-tabbar>
</v-ons-page>
</template>
<script>
import TaskList from './TaskList';
import SecondPage from './SecondPage';
export default {
template: '#main',
data: function () {
return {
tabs: [
{label: 'Browse', page: TaskList},
{label: 'Second', page: SecondPage}
]
}
}
};
</script>
Also, make sure the root element of the components you reference in the page property are <v-ons-page> elements.
I was having the same difficulty with the following syptoms:
Tabs were not appearing at all
No errors in CLI or in console
Note that I was also using the "Hello World" app that is generated from the CLI (vue init OnsenUI/vue-pwa-webpack hello-world)
Resolution
It was pretty simple in the end: there is a file in the root of the folder called vue-onsen-components.js which has all of the components and some of them are commented out. I had to uncomment the following lines and then the tabs appeared:
export { default as VOnsTab } from 'vue-onsenui/esm/components/VOnsTab'
export { default as VOnsTabbar } from 'vue-onsenui/esm/components/VOnsTabbar'