refactor - updated the libraries and fixed eslint errors

package.json

@@ -11,39 +11,39 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "@alenaksu/json-viewer": "^0.3.4",
-    "@contentstack/live-preview-utils": "^1.0.1",
-    "@contentstack/utils": "^1.1.1",
-    "contentstack": "^3.15.0",
-    "core-js": "^3.8.3",
-    "moment": "^2.29.2",
-    "register-service-worker": "^1.7.1",
-    "vue": "^3.2.27",
+    "@alenaksu/json-viewer": "^1.0.1",
+    "@contentstack/live-preview-utils": "^1.1.0",
+    "@contentstack/utils": "^1.1.2",
+    "contentstack": "^3.15.2",
+    "core-js": "^3.23.4",
+    "moment": "^2.29.4",
+    "register-service-worker": "^1.7.2",
+    "vue": "^3.2.37",
     "vue-class-component": "^8.0.0-0",
-    "vue-json-pretty": "^1.8.2",
+    "vue-json-pretty": "^2.1.1",
     "vue-json-tree-viewer": "^1.0.2",
     "vue-meta": "^2.4.0",
-    "vue-router": "^4.0.12",
+    "vue-router": "^4.1.2",
     "vue-skeletor": "^1.0.6",
     "vuex": "^4.0.2"
   },
   "devDependencies": {
-    "@types/node": "^17.0.34",
-    "@typescript-eslint/eslint-plugin": "^5.4.0",
-    "@typescript-eslint/parser": "^5.4.0",
-    "@vue/cli-plugin-babel": "~5.0.0",
-    "@vue/cli-plugin-eslint": "~5.0.0",
-    "@vue/cli-plugin-typescript": "~5.0.0",
-    "@vue/cli-plugin-vuex": "~5.0.0",
-    "@vue/cli-service": "~5.0.0",
-    "@vue/compiler-sfc": "^3.2.27",
-    "@vue/eslint-config-typescript": "^9.1.0",
+    "@types/node": "^18.0.3",
+    "@typescript-eslint/eslint-plugin": "^5.30.6",
+    "@typescript-eslint/parser": "^5.30.6",
+    "@vue/cli-plugin-babel": "~5.0.8",
+    "@vue/cli-plugin-eslint": "~5.0.8",
+    "@vue/cli-plugin-typescript": "~5.0.8",
+    "@vue/cli-plugin-vuex": "~5.0.8",
+    "@vue/cli-service": "~5.0.8",
+    "@vue/compiler-sfc": "^3.2.37",
+    "@vue/eslint-config-typescript": "^11.0.0",
     "babel-eslint": "^10.1.0",
-    "eslint": "^7.32.0",
-    "eslint-config-prettier": "^8.1.0",
-    "eslint-plugin-prettier": "^3.3.1",
-    "eslint-plugin-vue": "^8.0.3",
-    "typescript": "~4.5.5"
+    "eslint": "^8.19.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-vue": "^9.2.0",
+    "typescript": "~4.7.4"
   },
   "eslintConfig": {
     "root": true,

src/App.vue

@@ -1,20 +1,20 @@
 <template>
   <div>
-    <Header />
+    <HeaderComponent />
     <router-view :key="$route.path" />
-    <Footer />
+    <FooterComponent />
   </div>
 </template>
 
 <script>
-import Header from '@/components/HeaderContent.vue';
-import Footer from '@/components/FooterContent.vue';
+import HeaderComponent from '@/components/HeaderContent.vue';
+import FooterComponent from '@/components/FooterContent.vue';
 
 export default {
   name: 'App',
   components: {
-    Header,
-    Footer
-  }
+    HeaderComponent,
+    FooterComponent,
+  },
 };
 </script>

src/components/DevTools.vue

@@ -124,7 +124,7 @@ export default defineComponent({
     }
   },
   mounted: function mounted() {
-    let jsonData = this.filterObject(this.response);
+    const jsonData = this.filterObject(this.response);
     this.response = JSON.stringify(jsonData);
   },
   updated() {

src/components/FooterContent.vue

@@ -47,7 +47,6 @@
 </template>
 
 <script lang="ts">
-
 interface navFooterList {
   title: string;
   url: string;
@@ -56,31 +55,31 @@ interface navFooterList {
 import { defineComponent } from 'vue';
 import Stack from '../plugins/contentstack';
 import { onEntryChange } from '../plugins/contentstack';
-import Links from '../typescript/data'
+import Links from '../typescript/data';
 
 export default defineComponent({
   name: 'FooterContent',
   data() {
     return {
-      data: null
+      data: null,
     };
   },
   created() {
     this.getData();
   },
   methods: {
     async getData() {
-      let response = await Stack.getEntries({
+      const response = await Stack.getEntries({
         contentTypeUid: 'footer',
-        jsonRtePath: ['copyright']
+        jsonRtePath: ['copyright'],
       });
-      let responsePages: [navFooterList] = await Stack.getEntries({
-        contentTypeUid: 'page'
+      const responsePages: [navFooterList] = await Stack.getEntries({
+        contentTypeUid: 'page',
       });
 
-      let navFooterList = response[0].navigation.link;
+      const navFooterList = response[0].navigation.link;
       if (responsePages.length !== response.length) {
-        responsePages.forEach(entry => {
+        responsePages.forEach((entry) => {
           const fFound = response[0].navigation.link.find(
             (link: Links) => link.title === entry.title
           );
@@ -91,14 +90,14 @@ export default defineComponent({
       }
       this.data = response[0];
       this.$store.dispatch('setFooter', response[0]);
-    }
+    },
   },
   mounted() {
     onEntryChange(() => {
       if (process.env.VUE_APP_CONTENTSTACK_LIVE_PREVIEW === 'true') {
         this.getData();
       }
     });
-  }
+  },
 });
 </script>

src/components/HeaderContent.vue

@@ -51,7 +51,6 @@
 </template>
 
 <script lang="ts">
-
 interface navHeaderList {
   title: string;
   url: string;
@@ -61,56 +60,56 @@ import { defineComponent } from 'vue';
 import Stack from '../plugins/contentstack';
 import { onEntryChange } from '../plugins/contentstack';
 import Tooltip from '../components/ToolTip.vue';
-import Links from '../typescript/data'
+import Links from '../typescript/data';
 
 export default defineComponent({
   name: 'HeaderContent',
   components: {
-    Tooltip
+    Tooltip,
   },
   data() {
     return {
-      data: null
+      data: null,
     };
   },
   created() {
     this.getData();
   },
   methods: {
     async getData() {
-      let response = await Stack.getEntries({
+      const response = await Stack.getEntries({
         contentTypeUid: 'header',
         referenceFieldPath: `navigation_menu.page_reference`,
-        jsonRtePath: ['notification_bar.announcement_text']
+        jsonRtePath: ['notification_bar.announcement_text'],
       });
-      let responsePages: [navHeaderList] = await Stack.getEntries({
-        contentTypeUid: 'page'
+      const responsePages: [navHeaderList] = await Stack.getEntries({
+        contentTypeUid: 'page',
       });
-      let navHeaderList = response[0].navigation_menu;
+      const navHeaderList = response[0].navigation_menu;
       if (responsePages.length !== response.length) {
-        responsePages.forEach(entry => {
+        responsePages.forEach((entry) => {
           const hFound = response[0].navigation_menu.find(
             (navLink: Links) => navLink.label === entry.title
           );
 
           if (!hFound) {
             navHeaderList.push({
               label: entry.title,
-              page_reference: [{ title: entry.title, url: entry.url }]
+              page_reference: [{ title: entry.title, url: entry.url }],
             });
           }
         });
       }
       this.data = response[0];
       this.$store.dispatch('setHeader', response[0]);
-    }
+    },
   },
   mounted() {
     onEntryChange(() => {
       if (process.env.VUE_APP_CONTENTSTACK_LIVE_PREVIEW === 'true') {
         this.getData();
       }
     });
-  }
+  },
 });
 </script>

src/components/RenderComponents.vue

@@ -21,7 +21,7 @@
         title="about-content"
         :data="component.hero_banner"
       />
-      <Section
+      <SectionComponent
         v-if="component.section"
         :key="index"
         :data="component.section"
@@ -66,17 +66,16 @@
 </template>
 
 <script lang="ts">
-
 interface Component {
-    HeroBanner: object;
-    Section: object
-    SectionWithBuckets: object;
-    SectionWithCards: object;
-    AboutSectionBucket: object;
-    TeamSection: object;
-    BlogSection: object;
-    SectionWithEmbedObject: object
-    Devtools: object
+  HeroBanner: object;
+  Section: object;
+  SectionWithBuckets: object;
+  SectionWithCards: object;
+  AboutSectionBucket: object;
+  TeamSection: object;
+  BlogSection: object;
+  SectionWithEmbedObject: object;
+  Devtools: object;
 }
 
 interface Page {
@@ -93,9 +92,9 @@ interface Locale {
 
 import { defineComponent, PropType } from 'vue';
 import HeroBanner from '../components/HeroBanner.vue';
-import Section from '../components/SectionContent.vue';
+import SectionComponent from '../components/SectionContent.vue';
 import SectionWithCards from '../components/SectionWithCards.vue';
-import AboutSectionBucket from "../components/AboutSectionBucket.vue";
+import AboutSectionBucket from '../components/AboutSectionBucket.vue';
 import TeamSection from '../components/TeamSection.vue';
 import SectionWithEmbedObject from '../components/SectionWithEmbedObject.vue';
 import SectionWithBuckets from '../components/SectionWithBuckets.vue';
@@ -104,33 +103,33 @@ import Devtools from '../components/DevTools.vue';
 export default defineComponent({
   components: {
     HeroBanner,
-    Section,
+    SectionComponent,
     SectionWithBuckets,
     SectionWithCards,
     AboutSectionBucket,
     TeamSection,
     BlogSection,
     SectionWithEmbedObject,
-    Devtools
+    Devtools,
   },
 
   props: {
     components: {
       required: true,
-      type: Object as PropType<Component>
+      type: Object as PropType<Component>,
     },
     page: {
       required: true,
-      type: Object as PropType<Page>
+      type: Object as PropType<Page>,
     },
     entryUid: {
       required: true,
-      type: Object as PropType<EntryUid>
+      type: Object as PropType<EntryUid>,
     },
     locale: {
       required: true,
-      type: Object as PropType<Locale>
-    }
-  }
+      type: Object as PropType<Locale>,
+    },
+  },
 });
 </script>