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

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

Posted by: admin November 26, 2021 Leave a comment

Questions:

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?

Answers:

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/[email protected]/dist/vue-google-charts.browser.js

Working fiddle