CODEWITHSUNDEEP
javascriptvue-clibulmavuejs3buefy
user2728963
user2728963

Reputation: 193

How do I add the Buefy global object to Vue 3 CLI

I have been using the Buefy css library with Vue 3 and the CLI framework. I installed it with npm install and have been using it with no problem. That is until I wanted to use the dialog.alert feature. The example on Buefy shown says to use,

 this.$Buefy.dialog.alert("My Alert Msg");

This does not work. I don't have this.$Buefy, $Buefy, or Buefy as a defined object.

So I tried to define Buefy as a global object. The Buefy example shown says to write the following:

import Vue from 'vue'
import Buefy from 'buefy'
import 'buefy/dist/buefy.css'
Vue.use(Buefy)

The example above does not say where to write this, so I tried to write it in my main.js file. But the code in that file looks like nothing that will work with the suggested code. The code in main.js is:

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import './assets/scss/app.scss'

createApp(App).use(router).mount('#app')

There is no 'Vue' to use with Vue.use(Buefy) App.use does not work either.

I am at a loss as to how to implement a global Buefy object that will allow me to use implement features like the alert dialog.

Upvotes: 1

Views: 5581

Answers (1)

Emmanuel Ogoma
Emmanuel Ogoma

Reputation: 582

I seems you are using vue 3 createApp method, with that, you can do this

 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
 import './assets/scss/app.scss'
 import Buefy from 'buefy'
 import 'buefy/dist/buefy.css'

 const app=createApp(App);
 app.use(router);
 app.use(Buefy);
 app.mount('#app')

Upvotes: -1

Related Questions