i couldn't use the component directly on browser.

[lapcchan]

got this error:

[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

when using directly on browser with

<script src="vue-google-charts.browser.js"></script>

[nobilix]

@lapcchan could you provide a sample? you could use https://codesandbox.io or smth like this

[graham-sportsmgmt]

I had the exact same problem. The issue stems from this line in the docs:

<script src="vue-google-charts/dist/vue-google-charts.browser.js"></script>

This is an invalid url and the library won't load.

I tried doing this but it didn't load properly (maybe something on github?)

<script src="https://raw.githubusercontent.com/devstark-com/vue-google-charts/master/dist/vue-google-charts.browser.js"></script>

I then copied the js file into my /public/javascripts directory and it worked well.

<script src="/javascripts/vue-google-charts.browser.js')"></script>

So the fix for this would probably be to adjust the docs. An even better solution would be to have the library hosted on cdnjs or similar CDN.

For what it's worth, we're developing a complex app using micro-front-end architecture patterns and do not use the CLI. Having standalone browser deployment is a HUGE part of why we chose vue.js over Angular or other alternatives. Thanks to the authors for supporting this method to load this great library.

[alexxlagutin]

HI! @lapcchan Here is working usage example https://codesandbox.io/embed/v3qorzrxm7. The problem might be was in order of including files. You have to include the plugin first and then Vue.js.

@graham-sportsmgmt plugin is hosted on unpkg.com https://unpkg.com/vue-google-charts@latest/dist/vue-google-charts.browser.js and you also can use shorter link like this: https://unpkg.com/vue-google-charts@latest

[graham-sportsmgmt]

Pull request created:

#30

I just edited the existing order, which was vue.js THEN the plugin. I didn't need to load the plugin before vue.js to get it to work, but I'm also including script links in the head and calling Vue in window.onload.

[niyazpk]

For anyone else not able to make this work, here is sample code that works for me standalone in the browser (Probably some of this should go to the documentation too):

HTML:

<GChart id="chart" type="ColumnChart" v-bind:data="chartData" v-bind:options="chartOptions"></GChart>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-google-charts@0.3.2/dist/vue-google-charts.browser.js"></script>

JS:

Vue.component("gchart", VueGoogleCharts.GChart);

let chartData = {
    chartData: [
        ['Year', 'Sales', 'Expenses', 'Profit'],
        ['2014', 1000, 400, 200],
        ['2015', 1170, 460, 250],
        ['2016', 660, 1120, 300],
        ['2017', 1030, 540, 350]
    ],
    chartOptions: {
        chart: {
            title: 'Company Performance',
            subtitle: 'Sales, Expenses, and Profit: 2014-2017',
        }
    }
}

let chartVue = new Vue({
    el: '#chart',
    data: chartData
});

[SumanBandopadhyay]

I still face the problem against the chartOption.

I used the above link but it didn't help.
https://codesandbox.io/embed/v3qorzrxm7

The code given here is fine but still, the display present does not show the Options.