Search code examples
javascriptvue.jsgoogle-visualization

Cannot get vue-google-charts to work in browser mode


I'm starting to learn Vue.js and can use Google Charts standalone but cannot get the vue-google-charts component to work. I've included both vue.js and vue-google-charts.js as per instructions here https://github.com/devstark-com/vue-google-charts#browser but the chart does not render and get I the following error message

Unknown custom element: <gchart>

Example can be viewed here https://jsfiddle.net/ugLc0zrj/

What am I doing wrong?


Solution

  • In console you can see this error:

    Cross-Origin Read Blocking (CORB) blocked cross-origin response https://raw.githubusercontent.com/devstark-com/vue-google-charts/master/dist/vue-google-charts.browser.js with MIME type text/plain. See https://www.chromestatus.com/feature/5629709824032768 for more details.
    

    The script wasn't loaded. Other people had similar issues using raw.githubusercontent.com: Github issue- i couldn't use the component directly on browser

    Use this CDN link suggested by authors instead: https://unpkg.com/vue-google-charts@0.3.3/dist/vue-google-charts.browser.js

    Working fiddle