Search code examples
javascriptvue.jsgoogle-trends

How embed Google Trends in Vuejs?

I'm trying to embed google trends in my code vuejs but I can't find anything about how to do that.

I try it:

<script>
export default {
    created(){
        postscribe('#trend', `
        <script type="text/javascript" src="https://ssl.gstatic.com/trends_nrtr/2152_RC02/embed_loader.js"></script>
        <script type="text/javascript"> trends.embed.renderExploreWidget("GEO_MAP", {"comparisonItem":[{"keyword":"vue","geo":"BR","time":"today 12-m"}],"category":0,"property":""}, {"exploreQuery":"q=vue&geo=BR&date=today 12-m","guestPath":"https://trends.google.com.br:443/trends/embed/"}); </script>
        `)
    },
}
</script>
<template>
    <div class="container">
        <div id="trend">

        </div>
    </div>
</template>

Get an error: trends is not defined.

What is the best way to call a script in vue? Someone knows how to embed Google Trends in Vue?

Solution

  • Paste this into any HTML page and modify accordingly :

    <script type="text/javascript" src="https://ssl.gstatic.com/trends_nrtr/2152_RC02/embed_loader.js"></script> <script type="text/javascript"> trends.embed.renderExploreWidget("TIMESERIES", {"comparisonItem":[{"keyword":"Vue.js","geo":"","time":"today 12-m"}],"category":31,"property":""}, {"exploreQuery":"cat=31&q=Vue.js&date=today 12-m","guestPath":"https://trends.google.com:443/trends/embed/"}); 
</script>

    Also you can try with this reference link:

    https://trends.google.com/trends/explore?cat=31&q=Vue.js

https://codepen.io/Cleysense/pen/jeoMVq