fix: using FetchAsteroidWatchWidget (#624)

* using FetchAsteroidWatchWidget

* fixing mock component

apps/vue-storybook/.storybook/_mock-components.js

@@ -1,6 +1,7 @@
 // import and assign mock components
 import { action } from '@storybook/addon-actions'
 import DsnWidget from '@explorer-1/vue/src/components/DsnWidget/DsnWidget.vue'
+import AsteroidWatchWidget from '@explorer-1/vue/src/components/AsteroidWatchWidget/AsteroidWatchWidget.vue'
 
 export default (app) => {
   // nuxt-link mock component
@@ -27,4 +28,7 @@ export default (app) => {
 
   // use static dsn widget instead of fetch
   app.component('FetchDsnWidget', DsnWidget)
+
+  // use static asteroid watch widget instead of fetch
+  app.component('FetchAsteroidWatchWidget', AsteroidWatchWidget)
 }

packages/vue/src/templates/www/PageAsteroidWatchContent/PageAsteroidWatchContent.vue

@@ -1,3 +1,21 @@
+<script setup lang="ts">
+import { reactive } from 'vue'
+import NavSecondary from './../../../components/NavSecondary/NavSecondary.vue'
+import LayoutHelper from './../../../components/LayoutHelper/LayoutHelper.vue'
+import DetailHeadline from './../../../components/DetailHeadline/DetailHeadline.vue'
+import HeroMedia from './../../../components/HeroMedia/HeroMedia.vue'
+import ShareButtons from './../../../components/ShareButtons/ShareButtons.vue'
+import BlockStreamfield from './../../../components/BlockStreamfield/BlockStreamfield.vue'
+
+interface PageAsteroidWatchContentProps {
+  data: any
+}
+const props = withDefaults(defineProps<PageAsteroidWatchContentProps>(), {
+  data: undefined
+})
+
+const { data } = reactive(props)
+</script>
 <template>
   <div
     v-if="data"
@@ -30,7 +48,7 @@
     </LayoutHelper>
 
     <template v-if="data.slug === 'next-five-approaches'">
-      <AsteroidWatchWidget class="lg:mb-18 mb-10" />
+      <FetchAsteroidWatchWidget class="lg:mb-18 mb-10" />
     </template>
 
     <!-- share buttons -->
@@ -48,32 +66,3 @@
     <BlockStreamfield :data="data.body" />
   </div>
 </template>
-<script>
-import { defineComponent } from 'vue'
-import NavSecondary from './../../../components/NavSecondary/NavSecondary.vue'
-import LayoutHelper from './../../../components/LayoutHelper/LayoutHelper.vue'
-import DetailHeadline from './../../../components/DetailHeadline/DetailHeadline.vue'
-import HeroMedia from './../../../components/HeroMedia/HeroMedia.vue'
-import ShareButtons from './../../../components/ShareButtons/ShareButtons.vue'
-import BlockStreamfield from './../../../components/BlockStreamfield/BlockStreamfield.vue'
-import AsteroidWatchWidget from './../../../components/AsteroidWatchWidget/AsteroidWatchWidget.vue'
-
-export default defineComponent({
-  name: 'PageAsteroidWatchContent',
-  components: {
-    NavSecondary,
-    LayoutHelper,
-    HeroMedia,
-    ShareButtons,
-    BlockStreamfield,
-    DetailHeadline,
-    AsteroidWatchWidget
-  },
-  props: {
-    data: {
-      type: Object,
-      required: false
-    }
-  }
-})
-</script>