How to use Vue 3 & Add Plugin Boostrap-vue?

Question

I try using Vue 3, but I look can't using Vue.use(exampleplugin) again.

I using command vue add bootstrap-vue after generate vue create project. And on plugin bootstrap-vue warning with code:

import Vue from "vue";

import BootstrapVue from "bootstrap-vue";
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap-vue/dist/bootstrap-vue.css";

Vue.use(BootstrapVue);

Output warning terminal:

warning in ./src/plugins/bootstrap-vue.js

"export 'default' (imported as 'Vue') was not found in 'vue'

warning in ./node_modules/bootstrap-vue/esm/utils/vue.js

"export 'default' (imported as 'Vue') was not found in 'vue'

What's wrong with that? And how do I use vue 3 to add plugin bootstrap-vue?

Pretty sure BootstrapVue isn't compatible with Vue 3 yet. You should probably stick with Vue 2 — Phil
Did you ever manage to figure this out? I have the same problem but for a different library. Importing it in ‘main.js’ and chaining a .use to the createApp call doesn’t work. — Kopty

Tom Bowers Tom Bowers · Accepted Answer · 2020-08-25T01:09:52

Bootstrap Vue is not yet ready for Vue 3.

To answer part of your question, Vue 3 changes the method for instantiating the application instance, including how plugins are registered.

For example...

import { createApp } from 'vue';
import Router from './router/Router';

createApp({/* options */}})
  .use(Router)
  .mount('#app');

You can read more about this at the official docs.

https://v3.vuejs.org/guide/instance.html

https://v3.vuejs.org/guide/migration/introduction.html

How to use Vue 3 & Add Plugin Boostrap-vue?

2 Answers