Components of Vuestrap not working with Vue2 - vue.js

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?

Related

Vue Test Util can't find BootstrapVue html elements in Nuxt.js

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'],
}

Is there a tooltip tool that works with NuxtJS?

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)
})

How to use zingchart maps modules in Vue.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>

Vue v-on:click triggers unknown custom element error

What happens?
Vuejs instead of treating v-on:click / #click as an event handler it treats it as if I was adding a element. And triggers the following error
vue.common.js:593 [Vue warn]: Unknown custom element: <click> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <OrderTable> at resources\assets\js\components\OrderTable\OrderTable.vue
<Page> at resources\assets\js\components\Pages\Page.vue
<Root>
warn # vue.common.js:593
createElm # vue.common.js:5570
addVnodes # vue.common.js:5737
updateChildren # vue.common.js:5864
patchVnode # vue.common.js:5938
updateChildren # vue.common.js:5824
patchVnode # vue.common.js:5938
updateChildren # vue.common.js:5824
patchVnode # vue.common.js:5938
patch # vue.common.js:6098
Vue._update # vue.common.js:2672
updateComponent # vue.common.js:2790
get # vue.common.js:3144
run # vue.common.js:3221
flushSchedulerQueue # vue.common.js:2983
(anonymous) # vue.common.js:1839
flushCallbacks # vue.common.js:1760
I have simplified the component the error is happening in. But there is nothing special about the span that is triggering the error. It's a child of the root div element. Also the addRow method is irrelevant as the error happens no matter which function you bind to the click event.
<template>
<div>
<span v-on:click="addRow">Add new row</span>
</div>
</template>
<script>
export default {
name: "OrderTable",
methods: {
newRow: function () {
console.log('Adding new row')
},
}
This is the extract from app.js regarding the element:
_c("span", { on: { click: _vm.newRow } }, [_vm._v("Add new row")])

Compile failed using laravel 5.4 and bootstrap-vue

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