[Vuejs]-Integrating a widget in nuxtjs

by

0👍

✅

Make a component in components called WeatherWidget.vue

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

Include that in your page

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

Use that component

components: { WeatherWidget }

Define the SRC for the weatherwidget in your data of your page:

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&amp;height=350&amp;title=Borgstedt&amp;textColor=333333&amp;bgColor=FFFFFF&amp;transparency=false&amp;skyColor=undefined&amp;fontFamily=Default&amp;customFont=&amp;units=uk&amp;htColor=333333&amp;ltColor=C7C7C7&amp;displaySum=yes&amp;displayHeader=yes'
  }
}

And pass that as a property to the weatherwidget in your page:

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

Leave a comment