@saooti/octopus-sdk 31.0.8 → 31.0.9

package/README.md

@@ -569,7 +569,7 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
  * 30.0.70 Améliorations 30
  * 30.0.71 Parlement européen
  * 30.0.72 Ajout des traductions
-
+ * 30.0.73 Ajout classe css 
 
  * 31.0.0 Passage en 31
  * 31.0.1 Ajout pocket casts
@@ -580,7 +580,8 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
  * 31.0.6 Erreur de Merge 30
  * 31.0.7 Sécurisation
  * 31.0.8 Dropdown Lang + classicSelect
-
+ * 31.0.9 LazyLoad image
 
 
  
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "31.0.8",
+  "version": "31.0.9",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",
@@ -37,6 +37,7 @@
     "vue-multiselect": "^3.0.0-alpha.2",
     "vue-recaptcha-v3": "^2.0.1",
     "vue-router": "^4.0.12",
+    "vue3-lazyload": "^0.2.5-beta",
     "vue3-swatches": "^1.0.5",
     "vuex": "^4.0.2",
     "webpack": "^5.66.0"

package/src/App.vue

@@ -1,5 +1,6 @@
 <template>
-  <div 
+  <div
+    v-if="isInit"
     id="app"
     :key="reload"
     class="octopus-app"
@@ -45,27 +46,21 @@ export default defineComponent({
   data() {
     return {
       displayMenu: false as boolean,
-      initQueryRouter: false,
       reload: false as boolean,
+      isInit: false as boolean,
     };
   },
 
   watch: {
-    '$route': {
-      deep: true,
-      handler(){
-      if(!this.initQueryRouter){
-        this.initQueryRouter = true;
-        this.initApp();
-      }
-      }
-    },
     '$i18n.locale'(){
       this.$forceUpdate();
       this.reload = !this.reload;
     }
   },
-
+  async created(){
+    await this.initApp();
+    this.isInit =true;
+  },
   methods:{
     async initApp(){
       await this.initSdk();

package/src/assets/general.scss

@@ -213,6 +213,7 @@ body{
     background-size: cover;
     box-shadow: 0px 8px 26px 6px rgba(64, 163, 114, 0.3);
     margin: auto;
+    display: flex;
   }
 
   .comma {

package/src/components/display/emission/EmissionItem.vue

@@ -11,10 +11,10 @@
       :title="$t('Emission')"
       class="d-flex text-dark"
     >
-      <div
+      <img
+        v-lazy="emission.imageUrl"
         class="img-box"
-        :style="{ 'background-image': 'url(\'' + emission.imageUrl + '\')' }"
-      />
+      >
       <div class="emission-item-text">
         <div
           class="emission-name"

package/src/components/display/emission/EmissionPlayerItem.vue

@@ -18,11 +18,11 @@
       </div>
       <div
         class="img-box rounded-0"
-        :style="{
-          'background-image':
-            'url(\'' + emission.imageUrl + '?dummy=' + dummyParam + '\')',
-        }"
       >
+        <img
+          v-lazy="emission.imageUrl"
+          class="img-box rounded-0"
+        >
         <div
           v-if="titleInImage"
           class="titleInImage"

package/src/components/display/organisation/OrganisationChooser.vue

@@ -44,8 +44,8 @@
         <div class="multiselect-octopus-proposition">
           <img
             v-if="!light"
+            v-lazy="option.imageUrl"
             class="option__image"
-            :src="option.imageUrl"
             :alt="option.name"
           >
           <span
@@ -64,8 +64,8 @@
         >
           <img
             v-if="!light"
+            v-lazy="option.imageUrl"
             class="option__image"
-            :src="option.imageUrl"
             :alt="option.name"
           >
           <span

package/src/components/display/participant/ParticipantItem.vue

@@ -12,10 +12,10 @@
       class="mt-3 text-dark"
       :title="$t('Participant')"
     >
-      <div
+      <img
+        v-lazy="participant.imageUrl"
         class="img-box-circle"
-        :style="{ 'background-image': 'url(\'' + participant.imageUrl + '\')' }"
-      />
+      >
       <div class="participant-name">
         <img
           v-if="!activeParticipant && !isPodcastmaker && editRight"

package/src/components/display/playlist/PlaylistItem.vue

@@ -12,13 +12,10 @@
       :title="$t('Playlist')"
       class="text-dark"
     >
-      <div
+      <img
+        v-lazy="playlist.imageUrl"
         class="img-box"
-        :style="{
-          'background-image':
-            'url(\'' + playlist.imageUrl + '?dummy=' + dummyParam + '\')',
-        }"
-      />
+      >
     </router-link>
     <div class="emission-item-text">
       <router-link

package/src/components/display/podcasts/AnimatorsItem.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="animators && 0 !== animators.length"
-    class="d-flex align-items-center justify-content-start"
+    class="d-flex align-items-center justify-content-start animators-item"
   >
     <router-link
       v-for="(animator, index) in animators"
@@ -36,7 +36,6 @@ export default defineComponent({
       visibleIndex: 0 as number,
     };
   },
-
    methods: {
     getAnimatorName(animator: Participant): string {
       const first = animator.firstName || '';

package/src/components/display/podcasts/PodcastImage.vue

@@ -2,8 +2,11 @@
   <div
     v-if="podcast"
     class="img-box d-flex flex-column justify-content-start align-items-start position-relative justify rounded-lg flex-shrink-0 float-start"
-    :style="{ 'background-image': 'url(\'' + podcast.imageUrl + '\')' }"
   >
+    <img
+      v-lazy="podcast.imageUrl"
+      class="img-box"
+    >
     <template v-if="isPodcastmaker">
       <div
         :class="mainRubrique? 'mainRubrique' : 'notMainRubrique'"

package/src/components/display/podcasts/PodcastItem.vue

@@ -31,78 +31,34 @@
       />
     <!-- eslint-enable -->
     </div>
-    <div
-      class="d-contents"
+    <PodcastItemInfo
+      :podcast-id="podcast.podcastId"
+      :title="podcast.title"
+      :pub-date="podcast.pubDate"
+      :podcast-organisation-id="podcast.organisation.id"
+      :podcast-organisation-name="podcast.organisation.name"
+      :podcast-order="podcast.order"
+      :duration="podcast.duration"
+      :animators="podcast.animators"
       @mouseenter="showDescription"
       @mouseleave="hideDescription"
-    >
-      <div class="d-flex justify-content-between flex-wrap text-secondary mb-3">
-        <div class="me-3 small-text">
-          {{ date }}
-        </div>
-        <div
-          v-if="0 !== duration.length"
-          class="small-text"
-        >
-          {{ duration }}
-        </div>
-      </div>
-      <AnimatorsItem :animators="podcast.animators" />
-      <router-link
-        :to="{
-          name: 'podcast',
-          params: { podcastId: podcast.podcastId },
-          query: { productor: $store.state.filter.organisationId },
-        }"
-        class="text-dark d-flex flex-column flex-grow-1"
-      >
-        <div class="title-podcast-item">
-          {{ title }}
-        </div>
-      </router-link>
-      <PodcastPlayBar
-        :podcast="podcast"
-        class="mx-2"
-      />
-      <div class="d-flex justify-content-between">
-        <router-link
-          v-if="!isPodcastmaker"
-          :to="{
-            name: 'productor',
-            params: { productorId: podcast.organisation.id },
-            query: { productor: $store.state.filter.organisationId },
-          }"
-          class="text-dark producer-podcast-item"
-        >
-          <div>{{ '© ' + podcast.organisation.name }}</div>
-        </router-link>
-        <span
-          v-if="editRight && podcast.order && podcast.order > 1"
-          class="saooti-star-bounty text-danger pe-2"
-        />
-      </div>
-    </div>
+    />
   </li>
 </template>
 
 <script lang="ts">
-import AnimatorsItem from './AnimatorsItem.vue';
+import PodcastItemInfo from './PodcastItemInfo.vue';
 import PodcastImage from './PodcastImage.vue';
 import { state } from '../../../store/paramStore';
 import moment from 'moment';
-// @ts-ignore
-import humanizeDuration from 'humanize-duration';
-import PodcastPlayBar from '../podcasts/PodcastPlayBar.vue';
 import { Podcast } from '@/store/class/general/podcast';
-import { Category } from '@/store/class/general/category';
 import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'PodcastItem',
   
   components: {
-    AnimatorsItem,
+    PodcastItemInfo,
     PodcastImage,
-    PodcastPlayBar
   },
 
   props: {
@@ -116,113 +72,24 @@ export default defineComponent({
       isDescriptionBig: false as boolean,
     };
   },
-  
+
   computed: {
-    isPodcastmaker(): boolean {
-      return (state.generalParameters.podcastmaker as boolean);
-    },
     podcastShadow(): boolean {
       return (state.podcastsPage.podcastShadow as boolean);
     },
     podcastBorderBottom(): boolean {
       return (state.podcastsPage.podcastBorderBottom as boolean);
     },
-    date(): string {
-      return moment(this.podcast.pubDate).format('D MMMM YYYY, HH[h]mm');
-    },
     displayDate(): string {
       return moment(this.podcast.pubDate).format('X');
     },
-    category(): string {
-      const catIds = this.podcast.emission.iabIds;
-      return this.$store.state.categories
-        .filter((c: Category) => {
-          return catIds && catIds.includes(c.id);
-        })
-        .map((c: Category) => {
-          return c.name;
-        })
-        .join(', ');
-    },
     description(): string {
       if (!this.podcast.description) return '';
       return this.podcast.description;
     },
-    title(): string {
-      return this.podcast.title;
-    },
-    organisationId(): string|undefined {
-      return state.generalParameters.organisationId;
-    },
-    authenticated(): boolean {
-      return (state.generalParameters.authenticated as boolean);
-    },
-    editRight(): boolean {
-      if (
-        (this.authenticated &&
-          this.organisationId === this.podcast.organisation.id) ||
-        state.generalParameters.isAdmin
-      )
-        return true;
-      return false;
-    },
-    duration(): string {
-      if (this.podcast.duration <= 1) return '';
-      if (this.podcast.duration > 600000) {
-        return humanizeDuration(this.podcast.duration, {
-          language: 'short'+this.$i18n.locale.charAt(0).toUpperCase() + this.$i18n.locale.slice(1),
-          largest: 1,
-          round: true,
-          languages: {
-            shortFr: {
-              y: () => 'années',
-              mo: () => 'mois',
-              w: () => 'semaines',
-              d: () => 'jours',
-              h: () => 'h',
-              m: () => 'min',
-              s: () => 'sec',
-              ms: () => 'ms',
-            },
-            shortEn: {
-              y: () => 'years',
-              mo: () => 'months',
-              w: () => 'weeks',
-              d: () => 'days',
-              h: () => 'h',
-              m: () => 'min',
-              s: () => 'sec',
-              ms: () => 'ms',
-            },
-            shortIt: {
-              y: () => 'anni',
-              mo: () => 'mesi',
-              w: () => 'settimane',
-              d: () => 'giorni',
-              h: () => 'h',
-              m: () => 'min',
-              s: () => 'sec',
-              ms: () => 'ms',
-            },
-          },
-        });
-      }
-      return humanizeDuration(this.podcast.duration, {
-        language: 'short',
-        largest: 2,
-        round: true,
-        languages: {
-          short: {
-            m: () => 'min',
-            s: () => 'sec',
-            ms: () => 'ms',
-          },
-        },
-      });
-    },
   },
 
-  mounted() {
+  created() {
     const podcastDesc = document.getElementById(
       'description-podcast-' + this.podcast.podcastId
     );
@@ -262,26 +129,7 @@ export default defineComponent({
   text-align: left;
   background: #fff;
   flex-shrink: 0;
-  .text-secondary {
-    margin: 0.5rem !important;
-  }
-  .saooti-star-bounty {
-    font-size: 22px;
-  }
-
-  .title-podcast-item {
-    font-weight: 700;
-    margin: 0.25rem 0.5rem 0.5rem;
-    overflow: hidden;
-    display: -webkit-box;
-    flex-grow: 1;
-    font-size: 0.7rem;
-    -webkit-line-clamp: 3;
-    -webkit-box-orient: vertical;
-    min-height: 3rem;
-    line-height: 1rem;
-    word-break: break-word;
-  }
+ 
   .description-podcast-item {
     padding: 1rem;
     color: #333;
@@ -306,12 +154,6 @@ export default defineComponent({
       background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 40%);
     }
   }
-  .producer-podcast-item {
-    margin: 0.2rem 0.5rem 0.5rem;
-    font-size: 0.55rem;
-    color: #666;
-  }
-
   @media (max-width: 960px) {
     margin: 0.5rem !important;
   }

package/src/components/display/podcasts/PodcastItemInfo.vue

@@ -0,0 +1,170 @@
+<template>
+  <div class="d-contents podcast-item-info">
+    <div class="d-flex justify-content-between flex-wrap text-secondary mb-3">
+      <div class="me-3 small-text">
+        {{ date }}
+      </div>
+      <div
+        v-if="0 !== durationString.length"
+        class="small-text"
+      >
+        {{ durationString }}
+      </div>
+    </div>
+    <AnimatorsItem :animators="animators" />
+    <router-link
+      :to="{
+        name: 'podcast',
+        params: { podcastId: podcastId },
+        query: { productor: $store.state.filter.organisationId },
+      }"
+      class="text-dark d-flex flex-column flex-grow-1"
+    >
+      <div class="title-podcast-item">
+        {{ title }}
+      </div>
+    </router-link>
+    <PodcastPlayBar
+      :podcast-id="podcastId"
+      :duration="duration"
+      class="mx-2"
+    />
+    <div class="d-flex justify-content-between">
+      <router-link
+        v-if="!isPodcastmaker"
+        :to="{
+          name: 'productor',
+          params: { productorId: podcastOrganisationId },
+          query: { productor: $store.state.filter.organisationId },
+        }"
+        class="text-dark producer-podcast-item"
+      >
+        <div>{{ '© ' + podcastOrganisationName }}</div>
+      </router-link>
+      <span
+        v-if="editRight && podcastOrder && podcastOrder > 1"
+        class="saooti-star-bounty text-danger pe-2"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import AnimatorsItem from './AnimatorsItem.vue';
+import { state } from '../../../store/paramStore';
+import moment from 'moment';
+// @ts-ignore
+import humanizeDuration from 'humanize-duration';
+import PodcastPlayBar from './PodcastPlayBar.vue';
+import { defineComponent } from 'vue'
+import { Participant } from '@/store/class/general/participant';
+export default defineComponent({
+  name: 'PodcastItemInfo',
+  
+  components: {
+    AnimatorsItem,
+    PodcastPlayBar
+  },
+
+  props: {
+    podcastId: { default: undefined, type: Number},
+    title: { default: "", type: String},
+    pubDate: { default: "", type: String},
+    podcastOrganisationId: { default: "", type: String},
+    podcastOrganisationName: { default: "", type: String},
+    podcastOrder: { default: undefined, type: Number},
+    duration: { default: 0, type: Number},
+    animators: { default: undefined, type: Object as ()=> Array<Participant>},
+  },
+  
+  computed: {
+    isPodcastmaker(): boolean {
+      return (state.generalParameters.podcastmaker as boolean);
+    },
+    date(): string {
+      return moment(this.pubDate).format('D MMMM YYYY, HH[h]mm');
+    },
+    organisationId(): string|undefined {
+      return state.generalParameters.organisationId;
+    },
+    authenticated(): boolean {
+      return (state.generalParameters.authenticated as boolean);
+    },
+    editRight(): boolean {
+      if (
+        (this.authenticated &&
+          this.organisationId === this.podcastOrganisationId) ||
+        state.generalParameters.isAdmin
+      )
+        return true;
+      return false;
+    },
+    durationString(): string {
+      if (this.duration <= 1) return '';
+      if (this.duration > 600000) {
+        return humanizeDuration(this.duration, {
+          language: 'short',
+          largest: 1,
+          round: true,
+          languages: {
+            short: {
+              y: () => 'years',
+              mo: () => 'months',
+              w: () => 'weeks',
+              d: () => 'days',
+              h: () => 'h',
+              m: () => 'min',
+              s: () => 'sec',
+              ms: () => 'ms',
+            },
+          },
+        });
+      }
+      return humanizeDuration(this.duration, {
+        language: 'short',
+        largest: 2,
+        round: true,
+        languages: {
+          short: {
+            m: () => 'min',
+            s: () => 'sec',
+            ms: () => 'ms',
+          },
+        },
+      });
+    },
+  },
+})
+</script>
+
+<style lang="scss">
+.octopus-app{
+.podcast-item-info {
+  .text-secondary {
+    margin: 0.5rem !important;
+  }
+  .saooti-star-bounty {
+    font-size: 22px;
+  }
+  .title-podcast-item {
+    font-weight: 700;
+    margin: 0.25rem 0.5rem 0.5rem;
+    overflow: hidden;
+    display: -webkit-box;
+    flex-grow: 1;
+    font-size: 0.7rem;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    min-height: 3rem;
+    line-height: 1rem;
+    word-break: break-word;
+  }
+
+  .producer-podcast-item {
+    margin: 0.2rem 0.5rem 0.5rem;
+    font-size: 0.55rem;
+    color: #666;
+  }
+}
+}
+</style>

package/src/components/display/podcasts/PodcastList.vue

@@ -4,38 +4,39 @@
       :loading-text="loading?$t('Loading podcasts ...'):undefined"
       :error-text="loaded && !podcasts.length?$t(`No podcast match your query`):undefined"
     />
-    <div
-      v-if="showCount && loaded && podcasts.length > 1"
-      class="text-secondary mb-2"
-    >
-      {{ $t('Number podcasts', { nb: totalCount }) + sortText }}
-    </div>
-    <ul
-      v-show="loaded"
-      class="podcast-list"
-    >
-      <PodcastItem
-        v-for="p in podcasts"
-        :key="p.podcastId"
-        :podcast="p"
-      />
-    </ul>
-    <button
-      v-show="!allFetched && loaded"
-      class="btn"
-      :class="buttonPlus ? 'btn-link align-self-center width-fit-content m-4' : 'btn-more'"
-      :disabled="inFetching"
-      :title="$t('See more')"
-      @click="displayMore"
-    >
-      <template v-if="buttonPlus">
-        {{ $t('See more') }}
-      </template>
+    <template v-if="loaded">
       <div
-        :class="buttonPlus?'ms-1':''"
-        class="saooti-more"
-      />
-    </button>
+        v-if="showCount && podcasts.length > 1"
+        class="text-secondary mb-2"
+      >
+        {{ $t('Number podcasts', { nb: totalCount }) + sortText }}
+      </div>
+      <ul
+        class="podcast-list"
+      >
+        <PodcastItem
+          v-for="p in podcasts"
+          :key="p.podcastId"
+          :podcast="p"
+        />
+      </ul>
+      <button
+        v-show="!allFetched"
+        class="btn"
+        :class="buttonPlus ? 'btn-link align-self-center width-fit-content m-4' : 'btn-more'"
+        :disabled="inFetching"
+        :title="$t('See more')"
+        @click="displayMore"
+      >
+        <template v-if="buttonPlus">
+          {{ $t('See more') }}
+        </template>
+        <div
+          :class="buttonPlus?'ms-1':''"
+          class="saooti-more"
+        />
+      </button>
+    </template>
   </div>
 </template>
 
@@ -93,7 +94,7 @@ export default defineComponent({
       inFetching: false as boolean,
     };
   },
-  
+
   computed: {
     allFetched(): boolean {
       return this.dfirst >= this.totalCount;
@@ -144,8 +145,8 @@ export default defineComponent({
     },
   },
   
-  created() {
-    this.fetchContent(true);
+  async created() {
+    await this.fetchContent(true);
   },
   methods: {
     async fetchContent(reset: boolean): Promise<void> {

package/src/components/display/podcasts/PodcastPlayBar.vue

@@ -32,7 +32,6 @@
 </template>
 
 <script lang="ts">
-import { Podcast } from '@/store/class/general/podcast';
 import DurationHelper from '../../../helper/duration';
 import { displayMethods } from '../../mixins/functions';
 import { state } from '../../../store/paramStore';
@@ -41,21 +40,22 @@ export default defineComponent({
   name: 'PodcastPlayBar',
   mixins: [displayMethods],
   props: {
-    podcast: { default: ()=>({}), type: Object as ()=>Podcast },
+    podcastId: { default: undefined, type: Number},
+    duration: { default: 0, type: Number},
   },
   computed: {
     isProgressBar(): boolean{
       return (state.emissionsPage.progressBar as boolean);
     },
     percentProgress(): number{
-      if(!this.$store.state.player.podcast || this.podcast.podcastId !== this.$store.state.player.podcast.podcastId){
+      if(!this.$store.state.player.podcast || this.podcastId !== this.$store.state.player.podcast.podcastId){
         return 0;
       }
       if(!this.$store.state.player.elapsed){return 0;}
       return this.$store.state.player.elapsed * 100;
     },
     playedTime(): string{
-      if(this.$store.state.player.podcast && this.podcast.podcastId === this.$store.state.player.podcast.podcastId){
+      if(this.$store.state.player.podcast && this.podcastId === this.$store.state.player.podcast.podcastId){
         if (this.$store.state.player.elapsed && this.$store.state.player.elapsed > 0 && this.$store.state.player.total && this.$store.state.player.total > 0) {
           return DurationHelper.formatDuration(
             Math.round(this.$store.state.player.elapsed * this.$store.state.player.total)
@@ -65,12 +65,12 @@ export default defineComponent({
       return '00:00';
     },
     totalTime(): string {
-      return DurationHelper.formatDuration(Math.round(this.podcast.duration/1000));
+      return DurationHelper.formatDuration(Math.round(this.duration/1000));
     },
   },
   methods: {
     seekTo(event: MouseEvent): void {
-      if(!this.$store.state.player.podcast || this.podcast.podcastId !== this.$store.state.player.podcast.podcastId){return;}
+      if(!this.$store.state.player.podcast || this.podcastId !== this.$store.state.player.podcast.podcastId){return;}
       const rect = (event.currentTarget as Element).getBoundingClientRect();
       const barWidth = (event.currentTarget as Element).clientWidth;
       const x = event.clientX - rect.left;

package/src/components/misc/PlayerButtons.vue

@@ -4,7 +4,7 @@
     :to="podcastShareUrl"
   >
     <img
-      :src="podcastImage"
+      v-lazy="podcastImage"
       :alt="$t('Podcast image')"
       class="player-image"
     >

package/src/components/pages/Emission.vue

@@ -26,7 +26,7 @@
             <div class="mb-5 mt-3 descriptionText">
               <img
                 v-if="!isOuestFrance"
-                :src="imageUrl"
+                v-lazy="imageUrl"
                 :alt="$t('Emission name image', { name: name })"
                 class="img-box shadow-element float-start me-3 mb-3"
               >

package/src/components/pages/Participant.vue

@@ -14,12 +14,10 @@
       <div
         class="d-flex flex-column align-items-center mb-3"
       >
-        <div
+        <img
+          v-lazy="participant.imageUrl"
           class="img-box-circle mb-3"
-          :style="{
-            'background-image': 'url(\'' + participant.imageUrl + '\')',
-          }"
-        />
+        >
         <h2 class="text-capitalize">
           {{ name }}
         </h2>

package/src/components/pages/Playlist.vue

@@ -15,7 +15,7 @@
             <h2>{{ name }}</h2>
             <div class="mb-5 mt-3 descriptionText">
               <img
-                :src="imageUrl"
+                v-lazy="imageUrl"
                 :alt="$t('Playlist name image', { name: name })"
                 class="img-box shadow-element float-start me-3 mb-3"
               >

package/src/main.ts

@@ -1,5 +1,6 @@
 import { createApp } from 'vue';
 import { VueReCaptcha } from 'vue-recaptcha-v3';
+import VueLazyLoad from 'vue3-lazyload';
 import App from './App.vue';
 import { createI18n, VueMessageType } from 'vue-i18n';
 import I18nResources from './locale/messages';
@@ -66,5 +67,6 @@ createApp(App)
 .use(i18n)
 .use(store)
 .use(router)
+.use(VueLazyLoad)
 .use(VueReCaptcha, { siteKey: '6LfyP_4ZAAAAAPODj8nov2LvosIwcX0GYeBSungh' })
 .mount('#app');