dynamic route generation

components/TheFooter.vue

@@ -19,7 +19,7 @@
             Policy
           </p>
           <p class="footer-link">
-            <nuxt-link :to="`/policy/${privacyPolicy.handle}`">
+            <nuxt-link to="/policy/privacy-policy">
               Privacy Policy
             </nuxt-link>
           </p>
@@ -36,12 +36,7 @@
 
 <script>
 export default {
-  name: 'TheFooter',
-  computed: {
-    privacyPolicy () {
-      return this.$store.state.shop.privacyPolicy
-    }
-  }
+  name: 'TheFooter'
 }
 </script>
 

nuxt.config.js

@@ -1,4 +1,5 @@
 require('dotenv').config()
+const axios = require("axios")
 export default {
   mode: 'universal',
   /*
@@ -28,7 +29,7 @@ export default {
   */
   plugins: [
     { src: '~/plugins/localStorage.js', ssr: false },
-    { src: '~/plugins/moment', ssr: false }
+    { src: '~/plugins/moment' }
   ],
   /*
   ** Nuxt.js dev-modules
@@ -61,6 +62,62 @@ export default {
     domain: process.env.DOMAIN, // your shopify domain
     storefrontAccessToken: process.env.STOREFRONT_ACCESS_TOKEN// your shopify storefront access token
   },
+  generate: {
+    routes () {
+      return axios({
+        url: process.env.API_URL,
+        method: 'POST',
+        headers: {
+          'X-Shopify-Storefront-Access-Token': process.env.STOREFRONT_ACCESS_TOKEN,
+          Accept: 'application/json'
+        },
+        data: {
+          query: `query {
+                    blogs (first: 250) {
+                      edges {
+                        node {
+                          handle,
+                          articles (first: 250) {
+                            edges {
+                              node {
+                                handle
+                              }
+                            }
+                          }
+                        }
+                      }
+                    },
+                    products (first: 250) {
+                      edges {
+                        node {
+                          handle
+                        }
+                      }
+                    }
+                  }`
+        }
+      }).then((response) => {
+        const blogRoutes = response.data.data.blogs.edges
+        const productRoutes = response.data.data.products.edges
+        const CollectionRoutes = response.data.data.collections.edges
+        // eslint-disable-next-line no-console
+        console.log(blogRoutes)
+        const res = []
+        blogRoutes.forEach((blog) => {
+          blog.node.articles.edges.forEach((article) => {
+            res.push('/blog/' + blog.node.handle + '/article/' + article.node.handle)
+          })
+        })
+        productRoutes.forEach((product) => {
+          res.push('/products/' + product.node.handle)
+        })
+        CollectionRoutes.forEach((collection) => {
+          res.push('/collection/' + collection.node.handle)
+        })
+        return res
+      })
+    }
+  },
   /*
   ** Build configuration
   */

pages/blog/_handle/article/_articleHandle/index.vue

@@ -19,7 +19,7 @@
                 <p class="title article-title">{{ article.title }}</p>
                 <div class="tags has-addons level-item">
                   <span class="tag is-rounded is-info">@{{ article.authorV2.name }}</span>
-                  <span class="tag is-rounded">{{ $moment(article.publishedAt).format('DD MMMM Y') }}</span>
+                  <span class="tag is-rounded">{{ $moment(article.publishedAt, $moment.ISO_8601).format('DD MMMM Y') }}</span>
                 </div>
               </div>
             </div>

pages/index.vue

@@ -51,16 +51,7 @@ export default {
         query: `query {
               shop {
                 name,
-                description,
-                privacyPolicy {
-                  handle
-                },
-                termsOfService {
-                  handle
-                },
-                refundPolicy {
-                  handle
-                }
+                description
               },
               blogs(first: 10) {
                 edges {

pages/policy/privacy-policy/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="container">
-    <h1>Policy</h1>
+    <h1>Privacy Policy</h1>
   </div>
 </template>