Is there any tooltip tool that is integrated under NuxtJS? Currently I tried to use the v-tooltip but unfortunately I can't use it. Immediately it crashes.
I created the file in the plugins folder named tooltip.js and attached the following code there:
import Vue from 'vue'
import VTooltip from 'v-tooltip'
Vue.use(VTooltip)
Then in nuxt.config.js in the plugins object I attached this file.
Error when used:
ERROR Failed to compile with 1 errors friendly-errors 11:04:04
ERROR in ./components/Dashboard/Navigation/index.vue?vue&type=template&id=a70e9826&
Module Error (from ./node_modules/vue-loader/lib/loaders/templateLoader.js): friendly-errors 11:04:04
(Emitted value instead of an instance of Error)
Errors compiling template:
tag <button> has no matching end tag.
13 | <div class="user-panel">
14 | <div class="notification">
15 | <button v-tooltip="'You have new messages.'">
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
16 | <i class="fas fa-envelope">
17 | <div v-if="notification_active" class="notification-dot"></div>
friendly-errors 11:04:04
# ./components/Dashboard/Navigation/index.vue?vue&type=template&id=a70e9826& 1:0-209 1:0-209
# ./components/Dashboard/Navigation/index.vue
# ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./layouts/dashboard.vue?vue&type=script&lang=js&
# ./layouts/dashboard.vue?vue&type=script&lang=js&
# ./layouts/dashboard.vue
# ./.nuxt/App.js
# ./.nuxt/index.js
# ./.nuxt/client.js
# multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&name=client&path=/__webpack_hmr/client ./.nuxt/client.js
friendly-errors 11:04:04
ยป Updated components\Dashboard\Navigation\index.vue
For me is ok with create
plugins/tooltip.js
import Vue from "vue"
import { VTooltip, VPopover, VClosePopover } from "v-tooltip"
Vue.directive("tooltip", VTooltip);
Vue.directive("close-popover", VClosePopover)
Vue.component("v-popover", VPopover)
add css https://github.com/Akryum/v-tooltip#style-examples
And use
<input
type="text"
value=""
class="form-control"
v-tooltip="'Test tooltip'"
/>
you can use primevue with nuxt 3 and configure tooltip directive in primevue.js (starter : https://github.com/primefaces/primevue-quickstart-nuxt3/tree/main/plugins)
import Message from "primevue/message";
import Sidebar from "primevue/sidebar";
import BlockUI from "primevue/blockui";
import Tooltip from 'primevue/tooltip';
export default defineNuxtPlugin(nuxtApp => {
nuxtApp.vueApp.use(PrimeVue, { ripple: true })
nuxtApp.vueApp.use(ToastService)
nuxtApp.vueApp.component('Message', Message)
nuxtApp.vueApp.component('Button', Button)
nuxtApp.vueApp.component('InputText', InputText)
nuxtApp.vueApp.component('InputNumber', InputNumber)
nuxtApp.vueApp.component('Toast', Toast)
nuxtApp.vueApp.component('Dropdown', Dropdown)
nuxtApp.vueApp.component('Sidebar',Sidebar)
nuxtApp.vueApp.component('BlockUI',BlockUI)
// nuxtApp.vueApp.component('Tooltip', Tooltip)
nuxtApp.vueApp.directive('tooltip', Tooltip)
//other components that you need
})
With Nuxt3 you can use Floating Vue
yarn add floating-vue
Create file plugins/floating-vue.ts with below code
Enjoy nice tooltip as component or directive :)
plugins/floating-vue.ts
import FloatingVue from 'floating-vue'
import 'floating-vue/dist/style.css'
export default defineNuxtPlugin(nuxtApp => {
nuxtApp.vueApp.use(FloatingVue)
})
Related
I have a project in Nuxt.js and I am trying to test it using Vue Test Util which works effectively except on files where I use BootstrapVue custom html elements.
When I run npm test this error displays for every BootsrapVue html element.
console.error
[Vue warn]: Unknown custom element: <b-container> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <Anonymous>
<Root>
How can I prevent this?
You need to setup bootstrap-vue in your Jest enviroment, using a Jest setup file.
Create the setup file:
// #/jest-setup.js
import Vue from 'vue'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Vue.use(BootstrapVue)
Vue.use(IconsPlugin)
Then configure Jest's setupFiles to load it:
// #/jest.config.js
module.exports = {
setupFiles: ['./jest-setup.js'],
}
I am searching in the documentation but i not find any examples for using the maps modules with zingchart-vue
Really I am using Nuxt, but i supose that its same...
we have updated our readme in the zingchart-vue repo on how to address the problem.
https://github.com/zingchart/zingchart-vue#zingchart-modules
ZingChart comes bundled with your common chart types such as line, column, pie, and scatter. For additional chart types, you will need to import the additional module file.
For example, adding a depth chart to your vue component will require an additional import. Note, you must import from the modules-es6 directory in the zingchart package.
import 'zingchart/modules-es6/zingchart-depth.min.js';
Here is a full .vue example for loading a map:
<template>
<div style="height:200px">
<zingchart :height="'100%'" ref="myChart"
:data="{
shapes: [
{
type: 'zingchart.maps',
options: {
name: 'usa',
ignore: ['AK','HI']
}
}
]
}" >
</zingchart>
</div>
</template>
<script>
import zingchartVue from 'zingchart-vue';
import 'zingchart/modules-es6/zingchart-maps.min.js';
import 'zingchart/modules-es6/zingchart-maps-usa.min.js';
export default {
components: {
zingchart: zingchartVue,
},
}
</script>
I'm trying to make a cropped image and then upload it to amazon in my NuxtJs app. The problem comes when I import library vue-image-crop-upload and get unexpected token <. Or briefly Syntax error
I tried using no-ssr but looks like a problem inside actual module.
// Usage in component
<no-ssr>
<button class="btn btn-primary upload-picture" #click="toggleShow">Cargar imagen</button>
<avatar-upload field="img"
#crop-success="cropSuccess"
v-model="show"
:no-square="true"
:width="500"
lang-type="en"
:height="500"
:params="params"
:headers="headers"
img-format="png"></avatar-upload>
<img :src="imgDataUrl">
</no-ssr>
import VueImageCropUpload from 'vue-image-crop-upload';
// Plugin registered
import Vue from 'vue';
import myUpload from 'vue-image-crop-upload';
Vue.component('avatar', myUpload);
// nuxt.config.js
plugins: [
{src: 'plugins/VueCropper', ssr: false},],
vendor: ['jquery', 'bootstrap', 'vue-image-crop-upload'],
I expect it working on nuxt.js. Client rendered app on which i tried to do the same works perfect
Have you tried adding the package to nuxt.js transpile config?
in nuxt.config.js
build: {
transpile: ['vue-image-crop-upload' ]
}
tried to use the bootstrap-vue for the first time but got issue upon compiling assets. When I run npm run watch, I got an error something like below.
Module parse failed: C:\projects\portfolio\node_modules\bootstrap-vue\lib\mixins\dropdown.js Unexpected token (110:8)
You may need an appropriate loader to handle this file type.
| },
| methods: {
| ...clickOut.methods,
| noop() {
| // Do nothing event handler (used in visible watch)
# ./node_modules/bootstrap-vue/lib/mixins/index.js 2:0-38
app.js
import BootstrapVue from 'bootstrap-vue/dist/bootstrap-vue.esm';
Vue.component('b-navbar', require('./components/Navbar.vue'));
Navbar.vue
<template>
<div>
<!-- navbar contents here.. -->
</div>
</template>
<script>
import { bNavbar } from 'bootstrap-vue/lib/components'
export default {
components: { bNavbar }
}
</script>
Expected result
Must display the navbar component
It seems, that you try to use single BV component. In that case you need to setup your dev enviroment to be able to compile BV sources by installing babel plugin https://babeljs.io/docs/plugins/transform-object-rest-spread/ and configuring babel to include node_modules/bootstrap-vue/lib folder
In a single file component in the project created by vue-cli, i want to import some components of vuestrap:
import Vue from 'vue'
import alert from 'vue-strap/src/alert'
import dropdown from 'vue-strap/src/Dropdown'
export default {
name: 'todo',
components: {
alert, dropdown
},
data() {
return {
msg: '...'
}
}
}
If I only import alert, it is working without any problem. However, if I import Input, Dropdown, i get errors inside the vue files of the vuestrap files itself:
ERROR in ./~/vue-loader/lib/template-compiler.js?id=data-v-5f7de981!./~/vue-loader/lib/selector.js?type=template&index=0!./~/vue-strap/src/Dropdown.vue
Vue template syntax error:
v-else used on element <ul> without corresponding v-if.
# ./~/vue-strap/src/Dropdown.vue 9:2-143
# ./~/babel-loader/lib!./src/components/todolist/todolist.js
# ./src/components/ToDo.vue
# ./src/router/index.js
# ./src/main.js
# multi ./build/dev-client ./src/main.js
ERROR in ./~/vue-loader/lib/template-compiler.js?id=data-v-5f7de981!./~/vue-loader/lib/selector.js?type=template&index=0!./~/vue-strap/src/Dropdown.vue
Vue template syntax error:
class="btn btn-{{type}} dropdown-toggle": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div class="{{ val }}">, use <div :class="val">.
# ./~/vue-strap/src/Dropdown.vue 9:2-143
# ./~/babel-loader/lib!./src/components/todolist/todolist.js
# ./src/components/ToDo.vue
# ./src/router/index.js
# ./src/main.js
# multi ./build/dev-client ./src/main.js
For some components the build is completely crashed (e.g. Datepicker).
My question is: is Vuestrap not compatible with Vue2 as they said in the documentation? Or am I missing something?