Как встроить Google Trends в Vuejs?

Question

Я пытаюсь встроить тренды Google в свой код vuejs, но не могу найти ничего о том, как это сделать.

Я пытаюсь это сделать:

<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>

Получите ошибку: тренды не определены.

Как лучше всего вызвать скрипт в vue? Кто-то знает, как встраивать Google Trends в Vue?

Answer 1

Вставьте это на любую страницу HTML и измените соответственно:

<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> 

Также вы можете попробовать эту ссылку:

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

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