Интеграция виджета в nuxtjs

Question

, так как я полный новичок в Nuxtjs и vuejs, я все еще изучаю основы. Моя проблема: Как мне интегрировать погодный виджет (сгенерированный из службы сайта) в мою страницу nuxtjs?

Это сгенерированная ссылка виджета: https://darksky.net/widget/default/54.3333,9.7101/uk12/de.js?width=100%&height=350&title=Borgstedt&textColor=333333&bgColor=FFFFFF&transparency=false&skyColor=undefined&fontFamily=Default&customFont=&units=uk&htColor=333333&ltColor=C7C7C7&displaySum=yes&displayHeader=yes'

Я просто вставил это с тегом в моем разделе в моем файле VUE. Это не работаетЯ могу представить, что я должен поместить это в раздел под разделом. Но в какой форме и как мне это отобразить? (Код должен быть записан в разделе)

Заранее благодарен за вашу помощь от абсолютного новичка;)

Это скриншот моего кода в том виде, как он сейчас:

введите описание изображения здесь

Answer 1

Создайте компонент в components с именем WeatherWidget.vue

<template>
    <iframe :src="src"></iframe>
</template>
<script>
  export default {
    props: ['src']
  }
</script>

Включите его на своей странице

import WeatherWidget from '~/components/WeatherWidget.vue'

Используйте этот компонент

components: { WeatherWidget }

ОпределитеSRC для Weatherwidget в ваших данных вашей страницы:

data () {
  return {
    weatherWidgetSrc: 'https://darksky.net/widget/default/54.3333,9.7101/uk12/de?domain="+encodeURIComponent(window.location.href)+"&auth=1570731804_822dd4162ab203ebfdfb6574abec68d9&width=100%25&height=350&title=Borgstedt&textColor=333333&bgColor=FFFFFF&transparency=false&skyColor=undefined&fontFamily=Default&customFont=&units=uk&htColor=333333&ltColor=C7C7C7&displaySum=yes&displayHeader=yes'
  }
}

И передать это как свойство Weatherwidget на вашей странице:

<weather-widget :src="weatherWidgetSrc"></weather-widget>