Develop Reference

implementing cubejs with vue 5.0.6

i am trying to implement cubejs with a vue 5.0.6 project. i have read in places that it is only compatible with vue2. as soon as i install it into my vue5.0.6 project it gives error "createElement is not a function" which is originated from the code createApp(App) in main.js file.
i need to know if its compatible or not. if it is, what am i doing wrong.
i have tried using h instead of createApp as well.
import { h } from 'vue'
import App from './App.vue'
// import vuetify from './plugins/vuetify'
import { loadFonts } from './plugins/webfontloader'
import "bootstrap/dist/css/bootstrap.min.css"
// import Chart from 'chart.js'
loadFonts()
h(App)
// .use(vuetify)
// .use(Chart)
.mount('#app')
the above code gives error ".mount is not a function"
need instant help

Vue.use is not a function after npm update, in Vue 2

I recently ran an npm update on my Vue/Laravel app just to upgrade my version of Bulma. Of course, this brought up a dozen vulnerabilities which I decided to fix, and of course this screwed up my whole app, mainly thanks to Webpack and Mix issues. I finally got it everything to compile again with only a few SASS warnings, but when I run the app I get the following error:
Uncaught TypeError: Vue.use is not a function
Google seems to suggest this is a problem when upgrading to Vue 3, however I am still on Vue 2 (2.6). Here's my app.js:
require('./bootstrap');
import VueRouter from 'vue-router';
import router from './router/routes';
import VueConfirmDialog from 'vue-confirm-dialog'
import SkeletonBox from './components/shared/SkeletonBox.vue'
import ValidationErrors from './components/shared/ValidationErrorComponent.vue'
import Vuex from 'vuex';
import storeDefinition from './store'
import Index from './Index'
window.Vue = require('vue');
Vue.use(VueConfirmDialog);
// init the Router
Vue.use(VueRouter);
// Init the Vuex store
Vue.use(Vuex);
const store = new Vuex.Store(storeDefinition);
Vue.component("skeleton-box", SkeletonBox)
Vue.component("v-errors", ValidationErrors)
const app = new Vue({
el: '#app',
router,
store,
publicPath: './',
components:{
"index": Index
},
beforeCreate(){
// call loadStoredState action in store.js
this.$store.dispatch('loadStoredState');
}
});
I have absolutely no idea what I need to do to get this working - can anyone help?

How do I import Axios into main.js in Vue?

I seem to not be able to use axios in my vue project as it's saying that 'axios' is not defined when I try using axios.get() in my file for Home.vue. Am I doing something wrong in main.js where I configure it? Or am I missing something that needs to be added? Below is my code for main.js and it shows how I'm adding axios to my project.
import Vue from 'vue';
import GSignInButton from 'vue-google-signin-button';
import ElementUI from 'element-ui';
import axios from 'axios';
import './assets/element-variables.scss';
import locale from 'element-ui/lib/locale/lang/en';
import App from './App.vue';
import router from './router';
import store from './store';
Vue.config.productionTip = false;
Vue.use(ElementUI, { locale });
Vue.use(GSignInButton);
Vue.use(axios);
Vue.use(ElementUI);
new Vue({
router,
store,
render: (h) => h(App),
}).$mount('#app');
Edit: The solution for this issue for me was to install a vue plugin called vue-axios and follow the steps to configure here: https://www.npmjs.com/package/vue-axios

Try to add axios as instance global property instead of Vue.use(axios);:
Vue.prototype.$axios=axios
then you could use it in any child component like this.$axios.get()
learn more about adding-instance-properties

Vue JS NPM Module imported into Component

I am trying to import an npm package into my vue.js component. Specifically, I am trying to import ScrollMagic into my project, but I am getting it to be undefined.
I have seen people suggest previously that it should be in my mounted() hook, which I am doing but my import statements (I have tried both in main.js, and in the components tag but both have returned undefined variables. Any direction would be appreciated.
Script for my component:
<script>
import { ScrollMagic } from 'scrollmagic';
export default {
name: 'Scroller',
mounted() {
console.log(ScrollMagic);
},
};
</script>
And in my main.js
import Vue from 'vue';
/*
IMPORT STATEMENTS FOR MODULES GO HERE
*/
import sm from 'scrollmagic';
import gsap from 'gsap';
import App from './App.vue';
import './registerServiceWorker';
import router from './router';
Vue.config.productionTip = false;
/*
Usage statement
*/
Vue.use(sm);
Vue.use(gsap);
new Vue({
router,
render: (h) => h(App),
}).$mount('#app');

Maybe the scrollmagic package doesn't export a variable or function ScrollMagic, so it keeps getting undefined?
Have you tried:
import * as ScrollMagic from 'scrollmagic';
// OR
import ScrollMagic from 'scrollmagic';

How to register custom Vue components?

I promise I've read every related post I can find, but I'm getting any clear answers (as far as I can tell, but I'm new to Vue).
Details:
I'm using Vue v2.5.15
We are using webpack (I've read that this may affect how I have to use components)
I'm attempting to use this range slider component. I've tried to follow the documentation, but I keep getting an error stating [Vue warn]: Unknown custom element: <vue-slider> - did you register the component correctly?. I've tried reading the documentation and probably 20 different posts, but I'm still not getting this. Here is basically what I have in my JS file:
<!-- HTML -->
<div id="app">
<vue-slider
v-model="sliderRange"
:min="minPriceBase"
:max="maxPriceBase"
></vue-slider>
</div>
// Javascript
import Vue from 'vue';
import VueSlider from 'vue-slider-component';
import 'vue-slider-component/theme/default.css';
export default {
components: {
VueSlider
}
}
Vue.component('VueSlider', VueSlider);
var vm = new Vue({
el: '#app',
data: {},
components: {
VueSlider: window['vue-slider-component']
}
});
I've also read through the Vue docs on components and I can't figure what I'm doing wrong. How do I correctly register my component?
Update:
I've discovered that if I use:
components: {
VueSlider
}
Instead of:
components: {
VueSlider: window['vue-slider-component']
}
Then I stop getting error mentioned above. Instead I get an error stating [Vue warn]: Invalid prop: type check failed for prop "min". Expected Number, got Boolean. But think it's progress? Why would `window['vue-slider-component'] be necessary?

Looking at the docs, i think you tried to do all the different import variants at the same time
new Vue({
el: '#app',
components: {
VueSlider: window['vue-slider-component']
}
})
seems to be the suggested way of accessing the component that was appended to the window if you do a direct import via the script by adding
<script src="./node_modules/vue-slider-component/dist/vue-slider-component.umd.min.js"></script>
(which you aren't doing)
Then there is two more ways, you can install the component globally by using
// main.js
import VueSlider from 'vue-slider-component'
import 'vue-slider-component/theme/default.css'
Vue.component('VueSlider', VueSlider)
which would then make the vue-slider available to all the components in your application, so you don't have to import it multiple times. If you do this, you won't have to also define it locally. And finally the third option is to import it only locally:
// App.vue
import VueSlider from 'vue-slider-component'
import 'vue-slider-component/theme/default.css'
export default {
components: {
VueSlider
}
}
This would make the slider component only available to a single component. In your case, you can decide to either go for option 1:
import VueSlider from 'vue-slider-component'
Vue.component('VueSlider', VueSlider);
or option 2:
import VueSlider from 'vue-slider-component'
import 'vue-slider-component/theme/default.css'
export default {
components: {
VueSlider
}
}
The error you are seeing now by the way, is that your minPriceBase that you're referencing is not a Number, you would have to set that data on the instance:
import VueSlider from 'vue-slider-component'
import 'vue-slider-component/theme/default.css'
export default {
components: {
VueSlider
},
data () {
return {
minPriceBase: 0,
maxPricebase: 10
}
}
}
Be aware that in your code you pasted the export before your vue instance, you don't need to export anything there, you just need to define that component on the vue instance:
import VueSlider from 'vue-slider-component'
var vm = new Vue({
el: '#app',
data: {},
components: {
VueSlider
}
});
you should be able to get rid of this in your example, it doesn't do anything:
export default {
components: {
VueSlider
}
}

Recently, there was same problem and there was also 500 server side rendering error.
Anyway, I fixed and used that by using require.
if (process.browser) { // I am not sure if it is needed for you.
const VueSlider = require('vue-slider-component');
Vue.component('VueSlider', VueSlider);
Vue.use(require('vue-slider-component/theme/default.css'));
}
...
<vue-slider ...>
...
</vue-slider>