Staging

.env

@@ -1,5 +1,5 @@
-VUE_APP_CONTENTSTACK_API_KEY =your_stack_api_key
-VUE_APP_CONTENTSTACK_DELIVERY_TOKEN = your_stack_delivery_token
-VUE_APP_CONTENTSTACK_ENVIRONMENT = delivery_token_env
+VUE_APP_CONTENTSTACK_API_KEY =YOUR_API_KEY
+VUE_APP_CONTENTSTACK_DELIVERY_TOKEN = YOUR_DELIVERY_TOKEN
+VUE_APP_CONTENTSTACK_ENVIRONMENT = YOUR_PUBLISHING_ENVIRONMENT
 # optional EU region (default region is NA/US) when its kept empty
 # VUE_APP_CONTENTSTACK_REGION = 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "contentstack-vuejs-starter-app",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "A simple starter app build using VueJS and Contentstack",
   "author": "Contentstack",
   "license": "MIT",
@@ -12,7 +12,8 @@
   },
   "dependencies": {
     "@alenaksu/json-viewer": "^0.3.4",
-    "contentstack": "^3.12.2",
+    "@contentstack/utils": "^1.1.0",
+    "contentstack": "^3.14.0",
     "core-js": "^3.6.5",
     "moment": "^2.29.1",
     "register-service-worker": "^1.7.1",

src/components/BlogSection.vue

@@ -22,7 +22,10 @@
         />
         <div class="featured-content">
           <h3>{{ index.title }}</h3>
-          <p v-html="index.body.slice(0, 255)" />
+          <p
+            v-if="typeof index.body === 'string'"
+            v-html="index.body.slice(0, 255)"
+          />
           <p>
             <router-link class="blogpost-readmore" :to="index.url">
               Read More -->

src/components/Footer.vue

@@ -41,7 +41,7 @@
       </div>
     </div>
     <div class="copyright">
-      <p v-html="data.copyright" />
+      <p v-if="typeof data.copyright === 'string'" v-html="data.copyright" />
     </div>
   </footer>
 </template>
@@ -61,7 +61,10 @@ export default {
   },
   methods: {
     async getData() {
-      let response = await Stack.getEntries('footer');
+      let response = await Stack.getEntries({
+        contentTypeUid: 'footer',
+        jsonRtePath: ['copyright']
+      });
       this.data = response[0];
       this.$store.dispatch('setFooter', response[0]);
     }

src/components/Header.vue

@@ -1,7 +1,10 @@
 <template>
   <header v-if="data" class="header">
-    <div class="note-div">
-      <span v-html="data.notification_bar.announcement_text" />
+    <div class="note-div" v-if="data.notification_bar.show_announcement">
+      <span
+        v-if="typeof data.notification_bar.announcement_text === 'string'"
+        v-html="data.notification_bar.announcement_text"
+      />
       <span
         class="devtools"
         data-bs-toggle="modal"
@@ -42,7 +45,10 @@
             :key="navItems.title"
             class="nav-li"
           >
-            <router-link :to="navItems.page_reference[0].url">
+            <router-link
+              :to="navItems.page_reference[0].url"
+              active-class="active"
+            >
               {{ navItems.page_reference[0].title }}
             </router-link>
           </li>
@@ -67,10 +73,11 @@ export default {
   },
   methods: {
     async getData() {
-      let response = await Stack.getEntries(
-        'header',
-        `navigation_menu.page_reference`
-      );
+      let response = await Stack.getEntries({
+        contentTypeUid: 'header',
+        referenceFieldPath: `navigation_menu.page_reference`,
+        jsonRtePath: ['notification_bar.announcement_text']
+      });
       this.data = response[0];
       this.$store.dispatch('setHeader', response[0]);
     }