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.
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')
Related
Hello hope you are well!
I am creating a crud app in vuejs I have installed global vuejs, bootstrap and after that import file bootstrap in main.js.
import Vue from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import store from './store'
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Vue.use(BootstrapVue)
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
But when I run command npm run serve me display error:
WARNING Compiled with 1 warning 6:43:27 PM
warning in ./node_modules/bootstrap/dist/css/bootstrap.css
Module Warning (from ./node_modules/postcss-loader/dist/cjs.js):
Warning
(2482:3) autoprefixer: Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated.
Do you have any idea how to solve it?
Thanks in advance!
I had the same issue, solved by running
npm install bootstrap#5.2.0-beta1
I trying to use v-mask package in vue using npm. i run the npm install v-mask as the documentation says, but where exactly I should put in code to initialization? i tried to put it in the main.js file:
import { createApp } from 'vue'
import App from './App.vue'
import VueMask from 'v-mask'
Vue.use(VueMask);
createApp(App).mount('#app')
but get an error 'Vue' is not defined. what am I doing wrong?
v-mask is built for Vue 2, so you can't use it in Vue 3 (unless you use the migration build, but that's not really intended for third party plugins).
Consider using maska, which is a masking library that supports Vue 3:
npm i -S maska
Example usage:
import { createApp } from 'vue'
import App from './App.vue'
import Maska from 'maska'
createApp(App).use(Maska).mount('#app')
demo
try to save the app in a variable and execute use for app
import { createApp } from 'vue'
import App from './App.vue'
import VueMask from 'v-mask'
const app = createApp(App)
app.use(VueMask)
app.mount('#app')
someone knows how can I include Buefy in Vue3, becuause I am doing this (main.js) but I get an error:
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import Buefy from 'buefy';
import 'buefy/dist/buefy.css';
createApp(App)
.use(store)
.use(router)
.use(Buefy)
.mount("#app");
And the error is:
Uncaught TypeError: Vue.prototype is undefined
Buefy support for Vue3 is still in the planning phase. I think that its going to a while.
https://github.com/buefy/buefy/issues/2505
As of 7 Dec 2020:
https://github.com/buefy/buefy/issues/2505#issuecomment-739899697
Btw there is a new branch and I'll try to migrate other components to show you my main idea:
Typescript
Options API
In my opinion the problem is not migrate all to Vue 3 but maintain two versions.
Vue 3 is the future but official and not official libraries and frameworks (for example Nuxt) are not ready so I don't understand the really need at the moment.
Is there any way where I can include all my additional extensions such as (bootstrap.css, vue-moment, vue-axios, bootstrap-vue and etc) into main.js and register it as a global component to be used by all of the other .vue files in my components page?
As I have many pages that might need to use axios and other extensions, I do not want to include this code in every .vue page.
import axios from "axios"
I have tried including all of the imports into main.js and added Vue.use()
However some extensions like moment or axios or datetimepicker will still be required to be included in the component page for it to work properly. Else it will say that it is not defined.
For example.
Components folder - main.vue
import axios from "axios"; <-- (I do not want to include this here)
import moment from "moment"; <-- (I do not want to include this here)
Main.js
//I want all my extensions to be listed here and able to use throughout all of the components pages
import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'
import moment from 'vue-moment'
Vue.use(axios, moment);
new Vue({
router,
render: h => h(App)
}).$mount('#app')
Thanks!
Typically you can use the prototype of your Vue instance for JS libraries like moment or axios.
main.js:
import axios from 'axios'
Vue.prototype.$http = axios
Login.vue:
export default {
mounted () {
this.$http.get(...)
}
}
BootstrapVue is providing a very good documentation with explanations on how to register the components and import the styles.
main.js:
import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue);
App.vue:
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
This article explains it really well
https://vuejsdevelopers.com/2017/04/22/vue-js-libraries-plugins/
For me, I decided to go with this method.
main.js
import Vue from 'vue'
import VueAxios from 'vue-axios'
import axios from 'axios'
Vue.use(VueAxios,axios);
filename.vue - this is how I will access it
//By adding "this" in front, it seems to be working fine.
this.axios({...}}
How do i make an extension for Pimcore with VueJs and the VueJS-Router?
So far no problems with vuejs in the frontend … but i cant get the VueJs-Router running.
Does any anyone has an experience with VueJs Routing inside of a pimcore extension?
Thanks
if pimcore has main.js
put the router there
import Vue from 'vue'
import VueRouter from 'vue-router'
then use
Vue.use(VueRouter)
You have to define primcore layout and route properly to make vue-router work.
Define a layout working with vuejs
Define a route /(.*) to a view extended that layout
If you don't define wildcard route to vue layout, then primcore will handle url instead of vue-router. Hopes it helps.
Primcore custom routes documentation:
https://pimcore.com/docs/5.x/Development_Documentation/MVC/Routing_and_URLs/Custom_Routes.html
install vue-router with
npm install vue-router
then use
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
you can see more details about vue-router in officail website: https://router.vuejs.org/installation.html