I'm trying to use bootstrap-vue on my Vue-JS 3 project, but i got an error
Using npm run serve
And in my browser I got
Error on the browser
i used this command in my terminal
npm install vue bootstrap bootstrap-vue
and here is my main.js code
import { createApp } from 'vue'
import App from './App.vue'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
// Import Bootstrap and BootstrapVue CSS files (order is important)
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
createApp(App).use(BootstrapVue).use(IconsPlugin).mount('#app')
Anyone knows how to fix it? I saw is because something had changed from Vue 2 to 3, but i saw a project in Vue JS 3 already running with bootstrap so i guess this bug have fixed
Problem: Bootstrap-Vue is not yet compatible with Vue.js 3.
https://cdmoro.github.io/bootstrap-vue-3/
Use this its not fully released but works well, I'm using it in a several projects
cheers
Related
I can run Office Add-ins with Vue 3 but I can't implement them into Nuxt 3. Does anyone have any experience with that?
Tried solutions:
https://github.com/nuxt/nuxt.js/issues/10097
Office.JS but in Nuxt
I want to see one working example in Nuxt 3 as Vue.
Example Doc for Vue:
https://learn.microsoft.com/en-us/office/dev/add-ins/quickstarts/excel-quickstart-vue
============ Edited ============
Working setup for Vue - This is Javascript;
vue create test-addin
yo office # Selecting manifest only.
Able to use "window.Office"
// ./src/main.js
import { createApp } from 'vue'
import App from './App.vue'
window.Office.onReady(() => {
createApp(App).mount('#app')
})
Didn't install any plugin or modules for Vue.
Same way for Nuxt 3 - This is TypeScript;
npx nuxi init test-addin
yo office # Selecting manifest only.
Cannot use "window.Office"
Error:
Property 'Office' does not exist on type 'Window & typeof globalThis'.ts(2339)
Installed #types/office-js but don't know how to implement it correctly for Nuxt 3.
When adding vue-virtual-scroller using yarn I get the following error
No matching export in "node_modules/vue/dist/vue.esm-bundler.js" for import "default"
node_modules/vue-virtual-scroller/dist/vue-virtual-scroller.esm.js:4:7:
4 │ import Vue from 'vue';
╵ ~~~
I tried deleting node-modules and re-installing the package multiple times. But the error remains. Any idea how to solve this? Using Vue3.
It looks like the installed version of the plugin is still targeting Vue 2.
You have to install vue-virtual-scroller#next for Vue 3 ☺️
I am following a tutorial on YouTube about Vue, everything was working fine until I installed Bootstrap Vue and I ran npm run serve, I keep getting this error:
98% after emitting CopyPlugin
WARNING Compiled with 2 warnings 2:21:24 AM
warning in ./src/main.js
"export 'default' (imported as 'Vue') was not found in 'vue'
warning in ./node_modules/bootstrap-vue/esm/vue.js
"export 'default' (reexported as 'Vue') was not found in 'vue'
BootstrapVue isn't compatible with Vue 3 yet:
BootstrapVue provides one of the most comprehensive implementations of the Bootstrap v4.5 component and grid system available for Vue.js v2.6
You'll either have to use Vue 2, use Vue 3 without Bootstrap or find another component library which is compatible with Vue 3.
I have a Vue Cli 3 generated web component/custom element that uses Vuetify. I have a parent/host Vue App that is also using Vuetify. When the custom element loads into the host app, I get a bunch of Type errors as shown in the screenshot. e.g. Type Error: Cannot read property theme of undefined.
This appears to be a Vuetify issue. What is the correct architecture for using Vuetify within a Vue CLi custom element and in its host application?
Currently, I have Vue.js script tag in parent, for use by the custom element. And Vue is imported into the Vue app, as normal. Script tag is there only because the custom element requires it. I have Vuetify included in both as well. The web component is using the vuetify plugin. And so is the host.
The web component runs perfectly fine on its own, and so does the host app. So, apparently there are conflicts.
Thanks!
Donnie
Resolved this myself. In short, you cannot use the Vuetify plugin and the al-a-cart. It only works if you include the full Vue and Vuetify inside the web component. Not optimal, but at least it is a workaround for this Vuetify bug.
import Vue from "vue";
import Vuetify from "vuetify";
Vue.use(Vuetify);
// import { VApp,VToolbar,VToolbarTitle,VSpacer,VContainer,VLayout,VFlex,VCard,VCardTitle,VCardActions,VBtn,VDivider } from 'vuetify/lib';
export default {
/* components:{
VApp,VToolbar,VToolbarTitle,VSpacer,VContainer,VLayout,VFlex,VCard,VCardTitle,VCardActions,VBtn,VDivider
} */
}
I'm using an Electron boilerplate, from here: https://github.com/szwacz/electron-boilerplate/
It's using gulp-rollup to bundle the assets, and a dev server can be run with npm start.
Here are my import statements from app.js:
import os from 'os';
import { remote } from 'electron';
import jetpack from 'fs-jetpack';
import env from './env';
import jquery from 'jquery';
import parsley from 'parsleyjs';
import select2 from 'select2/dist/js/select2.js';
import { setupForm } from './form/form';
Everything works fine on an initial load with npm start, but as soon as I edit a file and save, which triggers the watch to reload the build, I get an error:
Error: Could not load select2/dist/js/select2.js (imported by /##/repo-name-example/src/app.js): ENOENT: no such file or directory, open 'select2/dist/js/select2.js'
at /##/repo-name-example/node_modules/rollup/dist/rollup.js:9428:10
at process._tickDomainCallback (internal/process/next_tick.js:129:7)
If I cancel the process and just npm start again, everything is fine.
Why would it forget where select2 is?
Since you are importing this manually using a file path, rather than a named import like the jquery line, you need to use
import select2 from './select2/dist/js/select2.js';
Note the ./ at the beginning. Otherwise, it effectively looks for a module called select2/dist/js/select2.js, rather than using the path.
You also might need to do change it to
import select2 from './node_modules/select2/dist/js/select2.js';
(Assuming thats where the folder is)