I am using highcharts.js for Vue 3. I am trying to add the highstock library but it isn't found in npm. What is the proper way to include it?
I assume it is not included because I'm getting this error:
Uncaught (in promise) Error: Highcharts error #17: www.highcharts.com/errors/17/?missingModuleFor=ohlc
- missingModuleFor: ohlc
Here is an example where they import from cdn: http://jsfiddle.net/damo6174/d14ytfed/
<script src="http://code.highcharts.com/stock/highstock.js"></script>
Example how to implement Highcharts Stock in version 3.0.0 Vue.js.
import { createApp } from "vue";
import Highcharts from "highcharts";
import Stock from "highcharts/modules/stock";
import HighchartsVue from "highcharts-vue";
import App from "./App.vue";
Stock(Highcharts);
const app = createApp(App);
app.use(HighchartsVue);
app.mount("#app");
<template>
<Chart :options="chartOptions" :constructorType="'stockChart'" />
</template>
<script>
import { Chart } from "highcharts-vue";
export default {
name: "App",
components: {
Chart,
},
data() {
return {
chartOptions: {
series: [
{
data: [5, 2, 3], // sample data
},
],
},
};
},
};
</script>
Demo: https://codesandbox.io/s/vue3-highcharts-example-forked-j9nw9t
Related
Hi I have installed Vuejs 3 and I am trying to embed a vimeo video with this library: import vueVimeoPlayer from 'vue-vimeo-player'.
I imported this in the main.js like this:
import vueVimeoPlayer from 'vue-vimeo-player'
Vue.use(vueVimeoPlayer)
My view is this one:
<template>
<div id="app">
<vueVimeoPlayer
ref="player"
:video-url="url"
:player-height="500"
:player-width="500"
:autoplay="true"
/>
<div #click="updateUrl()">click me</div>
<div #click="errorUrl()">error pls</div>
</div>
</template>
<script>
import { vueVimeoPlayer } from 'vue-vimeo-player';
export default {
name: 'App',
components: {
vueVimeoPlayer,
},
data () {
return {
url: "https://vimeo.com/605358147/b5c4f01703",
};
},
methods: {
updateUrl() {
this.url = "https://vimeo.com/604413787/dd09a5711";
},
errorUrl() {
this.url = "https://vimeo.com/605266340/a7aa996ffc";
},
},
};
</script>
I receive this huge error:
TypeError: Object(...) is not a function
at Proxy.render (index.es.js?558f:174:1)
at VueComponent.Vue._render (vue.runtime.esm.js?2b0e:3569:1)
at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:4081:1)
at Watcher.get (vue.runtime.esm.js?2b0e:4495:1)
at new Watcher (vue.runtime.esm.js?2b0e:4484:1)
etc
etc
So I wonder what am I doing wrong? Because I saw it working check this url:
https://codesandbox.io/s/m4z5v63jqy
Thanks
Vue.use is not directly available anymore in Vue3, you would have to use createApp().use
That's why you're seeing error. Try like this
Make sure you've install correct version of vue-vimeo-player to support Vue3
import { createApp } from 'vue'
import App from './App.vue'
import vueVimeoPlayer from 'vue-vimeo-player'
const app = createApp(App)
app.use(vueVimeoPlayer).mount("#app");
I used Vue 3 cli to install new testing ground for store and router to learn those.
Project come like this :
main.js:
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
createApp(App).use(store).use(router).mount("#app");
store.js (just added count for testing):
import { createStore } from 'vuex'
export default createStore({
state: {
count: 0
},
mutations: {},
actions: {},
modules: {},
});
and in views:
Home.vue:
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png" />
<HelloWorld msg="Welcome to Your Vue.js App" />
</div>
</template>
<script>
// # is an alias to /src
import HelloWorld from "#/components/HelloWorld.vue";
export default {
name: "Home",
components: {
HelloWorld,
},
mounted() {
console.log(store.state.count)
},
};
</script>
By all that I have read I should be able to access store in component with:
mounted() {
console.log(store.state.count)
},
But i get store is not defined.
While it is obliviously imported and used in main app with index.js's:
import store from "./store";
createApp(App).use(store)
I heave spent hours on this, please advise. This is out of the box cli installation, i don't understand what they wont me to do...
You've to access it using this and prepended by $ sign:
export default {
name: "Home",
components: {
HelloWorld,
},
mounted() {
console.log(this.$store.state.count)
},
};
I am using: npm install vue-stripe-checkout, but a i get this error:
vue.runtime.esm.js?2b0e:5106 Uncaught TypeError: Cannot read property 'install' of undefined
at Function.Vue.use (vue.runtime.esm.js?2b0e:5106)
at eval (main.js?56d7:5)
at Module../src/main.js (app.js:1148)
in my main.js:
import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify';
import VueStripeCheckout from 'vue-stripe-checkout';
Vue.use(VueStripeCheckout, "pk_test_wk9TFDEeu4kRrI1pT0WxYrBC00bSQO9djj");
Vue.config.productionTip = false
new Vue({
vuetify,
render: h => h(App)
}).$mount('#app')
Looks like you're using the newest version of vue-stripe-checkout which has breaking changes that doesn't allow you to use as above way (as a plugin)
It currently exports 2 components: StripeCheckout and StripeElements which requires you to use them as component instead.
Here is a very basic example:
<template>
<stripe-checkout
ref="checkoutRef"
:pk="publishableKey"
:items="items"
:successUrl="successUrl"
:cancelUrl="cancelUrl"
>
<template slot="checkout-button">
<button #click="checkout">Check out</button>
</template>
</stripe-checkout>
</template>
<script>
import { StripeCheckout } from 'vue-stripe-checkout';
export default {
components: {
StripeCheckout
},
data: () => ({
loading: false,
publishableKey: 'YourKey',
items: [
{
sku: 'sku_FdQKocNoVzznpJ',
quantity: 1
}
],
successUrl: 'your-success-url',
cancelUrl: 'your-cancel-url',
}),
methods: {
checkout () {
this.$refs.checkoutRef.redirectToCheckout();
}
}
}
</script>
You could reference to here to see all examples for both components: https://github.com/jofftiquez/vue-stripe-checkout
I have a component called SpotifyButton in the components directory that looks like this:
<template functional>
<b-button pill size="sm" :href="props.spotifyUri" class="spotify-green">
<b-img-lazy
src="~/assets/Spotify_Icon_RGB_White.png"
height="20"
width="20"
/>
View on Spotify
</b-button>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
name: 'SpotifyButton',
props: {
spotifyUri: {
type: String,
required: true
}
}
});
</script>
I'm able to import and use this in a component in the pages directory like so without any problem:
<template>
<spotify-button :spotify-uri="artist.uri"/>
</template>
<script lang="ts">
import Vue from 'vue';
import { Context } from '#nuxt/types';
import FullArtist from '#/types/FullArtist';
import SpotifyButton from '#/components/SpotifyButton.vue';
export default Vue.extend({
name: 'ArtistPage',
components: {
SpotifyButton
},
async asyncData({ $axios, params, error }: Context) {
try {
const artist: FullArtist = await $axios.$get(`/api/artists/${params.id}`);
return { artist };
} catch (e) {
error({ statusCode: 404, message: 'Artist not found' });
}
},
data() {
return {
artist: {
name: ''
} as FullArtist
};
}
});
</script>
However if I try to import SpotifyButton into another component in the components directory in the same way, I get the following error.
Here is the ArtistPreview component, which is in the components directory:
<template functional>
<spotify-button :spotify-uri="props.artist.uri"/>
</template>
<script lang="ts">
import Vue, { PropType } from 'vue';
import SpotifyButton from '#/components/SpotifyButton.vue';
import SimpleArtist from '#/types/SimpleArtist';
export default Vue.extend({
name: 'ArtistPreview',
components: {
SpotifyButton
},
props: {
artist: {
type: Object as PropType<SimpleArtist>,
required: true
}
}
});
</script>
Am I missing something? Why does an import that works perfectly fine in a pages directory component not work in a components directory component?
This was happening because I'm using functional components. It turns out you can't nest functional components without doing some funky workarounds. Here's the GitHub issue with a few solutions.
I went with the first solution, so my ArtistPreview component now looks something like this:
<template functional>
<spotify-button :spotify-uri="props.artist.uri"/>
</template>
<script lang="ts">
import Vue, { PropType } from 'vue';
import SpotifyButton from '#/components/SpotifyButton.vue';
import SimpleArtist from '#/types/SimpleArtist';
Vue.component("spotify-button", SpotifyButton);
export default Vue.extend({
name: 'ArtistPreview',
props: {
artist: {
type: Object as PropType<SimpleArtist>,
required: true
}
}
});
</script>
Go with:
import SpotifyButton from '~/components/SpotifyButton.vue'
With Typescript is better use another approach: Add 'nuxt-property-decorator' and follow his flow.
So, you define your component as follow:
<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator'
import SpotifyButton from '~/components/SpotifyButton.vue'
#Component({
components: {
SpotifyButton
},
})
class AnotherComponent extends Vue {
...
}
export default AnotherComponent
</script>
[Nuxt Property Decorator on Github][1]
I think is important to read the official [Nuxt Typescript documentation][2] to a proper setup.
I hope it helps!
[1]: https://github.com/nuxt-community/nuxt-property-decorator
[2]: https://typescript.nuxtjs.org/
I'm using csv-loader from webpack to load my CSV file and it loads fine on my Vue JS app.
The data.csv key is populated but the chart is not displayed.
App is being served locally.
<template>
<div id="app">
<img src="./assets/logo.png">
<highcharts :options="chartOptions"></highcharts>
</div>
</template>
<script>
import {Chart} from 'highcharts-vue'
import csvPath from './assets/test.csv'
import Papa from 'papaparse'
export default {
name: 'app',
components: {
highcharts: Chart
},
data () {
return {
chartOptions: {
chart: {
type: 'column'
},
data: {
csv: csvPath
},
title: {
text: 'Fruit Consumption'
},
yAxis: {
title: {
text: 'Units'
}
}
}
}
},
CSV File
Categories,Apples,Pears,Oranges,Bananas
John,8,4,6,5
I expect to see a fully plotted graph (barchart).
Try to import and initialize the data Highcharts module like that:
import Highcharts from "highcharts";
import dataModule from "highcharts/modules/data";
dataModule(Highcharts);