Merge pull request #91 from vuestorefront/feat-#90/core-web-vitals

feat: #90 improve Core Web Vitals
vuestorefront-community · Sep 14, 2021 · 2c5f453 · 2c5f453
2 parents da02273 + fec13da
commit 2c5f453
Show file tree

Hide file tree

Showing 7 changed files with 554 additions and 12 deletions.
diff --git a/docs/changelog/1.0.0-beta.2.md b/docs/changelog/1.0.0-beta.2.md
@@ -10,3 +10,4 @@
 * [Docs]: add section about theme in docs [#55](https://github.com/vuestorefront/vendure/issues/55)
 * [Feature]: update packages due to security report [#85](https://github.com/vuestorefront/vendure/issues/85)
 * [Feature]: implement checkout middleware and fix payment error [#82](https://github.com/vuestorefront/vendure/issues/82)
+* [Feature]: update project for Core Web Vitals [#90](https://github.com/vuestorefront/vendure/issues/90)
diff --git a/packages/theme/components/AppHeader.vue b/packages/theme/components/AppHeader.vue
@@ -28,6 +28,7 @@
           <SfButton
             v-e2e="'app-header-account'"
             class="sf-button--pure sf-header__action"
+            aria-label="Open account button"
             @click="handleAccountClick"
           >
             <SfIcon
@@ -37,6 +38,7 @@
           </SfButton>
           <SfButton
             class="sf-button--pure sf-header__action"
+            aria-label="Toggle wishlist sidebar"
             @click="toggleWishlistSidebar"
           >
             <SfIcon
@@ -47,6 +49,7 @@
           </SfButton>
           <SfButton
             v-e2e="'app-header-cart'"
+            aria-label="Toggle cart sidebar"
             class="sf-button--pure sf-header__action"
             @click="toggleCartSidebar"
           >
@@ -75,6 +78,7 @@
           <template #icon>
             <SfButton
               v-if="!!term"
+              aria-label="Close search"
               class="sf-search-bar__button sf-button--pure"
               @click="closeOrFocusSearchBar"
             >
@@ -84,6 +88,7 @@
             </SfButton>
             <SfButton
               v-else
+              aria-label="Open search"
               class="sf-search-bar__button sf-button--pure"
               @click="isSearchOpen ? isSearchOpen = false : isSearchOpen = true"
             >

diff --git a/packages/theme/nuxt.config.js b/packages/theme/nuxt.config.js
@@ -20,22 +20,15 @@ export default {
     ],
     link: [
       { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
-      {
-        rel: 'preconnect',
-        href: 'https://fonts.gstatic.com',
-        crossorigin: 'crossorigin'
-      },
-      {
-        rel: 'stylesheet',
-        href: 'https://fonts.googleapis.com/css?family=Raleway:300,400,400i,500,600,700|Roboto:300,300i,400,400i,500,700&display=swap'
-      }
     ]
   },
   loading: { color: '#fff' },
   plugins: [],
   buildModules: [
     // to core
     '@nuxt/typescript-build',
+    '@nuxtjs/google-fonts',
+    '@nuxtjs/pwa',
     '@nuxtjs/style-resources',
     [
       '@vue-storefront/nuxt',
@@ -71,7 +64,9 @@ export default {
     }]
   ],
   modules: [
-    'nuxt-i18n',
+    ['nuxt-i18n', {
+      baseUrl: process.env.BASE_URL || 'http://localhost:3000'
+    }],
     'cookie-universal-nuxt',
     'vue-scrollto/nuxt',
     '@vue-storefront/middleware/nuxt'
@@ -153,5 +148,23 @@ export default {
         })
       })
     ]
+  },
+  pwa: {
+    meta: {
+      theme_color: '#5ECE7B'
+    }
+  },
+  googleFonts: {
+    families: {
+      Raleway: {
+        wght: [300, 400, 500, 600, 700],
+        ital: [400]
+      },
+      Roboto: {
+        wght: [300, 400, 500, 700],
+        ital: [300, 400]
+      }
+    },
+    display: 'swap'
   }
 };
diff --git a/packages/theme/package.json b/packages/theme/package.json
@@ -19,6 +19,7 @@
   },
   "dependencies": {
     "@nuxtjs/pwa": "^3.3.5",
+    "@nuxtjs/google-fonts": "1.3.0",
     "@nuxtjs/style-resources": "^1.2.1",
     "@storefront-ui/vue": "0.10.8",
     "@vue-storefront/middleware": "~2.4.1",