Add lazy loading and hydration

packages/boilerplate/api-client/package.json

@@ -13,7 +13,7 @@
     "prepublish": "yarn build"
   },
   "dependencies": {
-    "@vue-storefront/core": "^2.1.0-rc.1"
+    "@vue-storefront/core": "^2.1.1-rc.1"
   },
   "files": [
     "lib/**/*"

packages/boilerplate/composables/package.json

@@ -14,7 +14,7 @@
   },
   "dependencies": {
     "@vue-storefront/boilerplate-api": "^0.0.1",
-    "@vue-storefront/core": "^2.1.0-rc.1"
+    "@vue-storefront/core": "^2.1.1-rc.1"
   },
   "files": [
     "lib/**/*"

packages/boilerplate/theme/nuxt.config.js

@@ -10,20 +10,20 @@ export default {
     title: 'Vue Storefront',
     meta: [
       { charset: 'utf-8' },
-      { name: 'viewport',
-        content: 'width=device-width, initial-scale=1' },
-      { hid: 'description',
-        name: 'description',
-        content: process.env.npm_package_description || '' }
+      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
     ],
     link: [
       { rel: 'icon',
         type: 'image/x-icon',
         href: '/favicon.ico'
-      }, {
-        rel: 'preconnect',
-        href: 'https://fonts.googleapis.com'
-      }, {
+      },
+      {
+        rel: 'preload',
+        href: 'https://fonts.googleapis.com/css?family=Raleway:300,400,400i,500,600,700|Roboto:300,300i,400,400i,500,700&display=swap',
+        as: 'style'
+      },
+      {
         rel: 'preconnect',
         href: 'https://fonts.gstatic.com'
       }

packages/boilerplate/theme/package.json

@@ -12,21 +12,21 @@
   },
   "dependencies": {
     "@storefront-ui/vue": "^0.9.1",
-    "@vue-storefront/boilerplate-api": "^0.0.1",
     "@vue-storefront/boilerplate": "^0.0.1",
-    "@vue-storefront/nuxt": "^2.1.0-rc.1",
-    "@vue-storefront/nuxt-theme": "^2.1.0-rc.1",
+    "@vue-storefront/boilerplate-api": "^0.0.1",
+    "@vue-storefront/nuxt": "^2.1.1-rc.1",
+    "@vue-storefront/nuxt-theme": "^2.1.1-rc.1",
     "@nuxtjs/style-resources": "^1.0.0",
     "cookie-universal-nuxt": "^2.1.3",
-    "nuxt-i18n": "^6.5.0",
     "core-js": "^2.6.5",
     "nuxt": "^2.13.3",
+    "nuxt-i18n": "^6.5.0",
     "vee-validate": "^3.2.3",
     "vue-scrollto": "^2.17.1"
   },
   "devDependencies": {
-    "@nuxt/typescript-build": "^2.0.0",
     "@nuxt/types": "^0.7.9",
+    "@nuxt/typescript-build": "^2.0.0",
     "@vue/test-utils": "^1.0.0-beta.27",
     "babel-jest": "^24.1.0",
     "jest": "^24.1.0",

packages/commercetools/theme/nuxt.config.js

@@ -10,20 +10,21 @@ export default {
     title: process.env.npm_package_name || '',
     meta: [
       { charset: 'utf-8' },
-      { name: 'viewport',
-        content: 'width=device-width, initial-scale=1' },
-      { hid: 'description',
-        name: 'description',
-        content: process.env.npm_package_description || '' }
+      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
     ],
     link: [
       { rel: 'icon',
         type: 'image/x-icon',
         href: '/favicon.ico'
-      }, {
-        rel: 'preconnect',
-        href: 'https://fonts.googleapis.com'
-      }, {
+      },
+
+      {
+        rel: 'preload',
+        href: 'https://fonts.googleapis.com/css?family=Raleway:300,400,400i,500,600,700|Roboto:300,300i,400,400i,500,700&display=swap',
+        as: 'style'
+      },
+      {
         rel: 'preconnect',
         href: 'https://fonts.gstatic.com'
       }

packages/core/nuxt-theme-module/package.json

@@ -16,7 +16,8 @@
     "ejs": "^3.0.2",
     "loglevel": "^1.6.7",
     "ts-loader": "^8.0.3",
-    "vue": "^2.6.11"
+    "vue": "^2.6.11",
+    "vue-lazy-hydration": "^2.0.0-beta.4"
   },
   "publishConfig": {
     "access": "public"

packages/core/nuxt-theme-module/theme/components/CartSidebar.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="cart">
     <SfSidebar
-      :visible="isCartSidebarOpen"
+      :visible="true"
       title="My Cart"
       class="sf-sidebar--right"
       @close="toggleCartSidebar"
@@ -136,7 +136,7 @@ export default {
     SfImage
   },
   setup() {
-    const { isCartSidebarOpen, toggleCartSidebar } = useUiState();
+    const { toggleCartSidebar } = useUiState();
     const { cart, removeFromCart, updateQuantity, loadCart } = useCart();
     const { isAuthenticated } = useUser();
     const products = computed(() => cartGetters.getItems(cart.value));
@@ -152,7 +152,6 @@ export default {
       products,
       removeFromCart,
       updateQuantity,
-      isCartSidebarOpen,
       toggleCartSidebar,
       totals,
       totalItems,

packages/core/nuxt-theme-module/theme/components/LoginModal.vue

@@ -1,6 +1,6 @@
 <template>
   <SfModal
-    :visible="isLoginModalOpen"
+    :visible="true"
     class="modal"
     @close="toggleLoginModal"
   >
@@ -203,7 +203,6 @@ export default {
       isLogin,
       createAccount,
       rememberMe,
-      isLoginModalOpen,
       toggleLoginModal,
       handleLogin,
       handleRegister

packages/core/nuxt-theme-module/theme/components/WishlistSidebar.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="wishlist">
     <SfSidebar
-      :visible="isWishlistSidebarOpen"
+      :visible="true"
       :button="false"
       title="My Wishlist"
       @close="toggleWishlistSidebar"
@@ -96,7 +96,7 @@ export default {
     SfCollectedProduct
   },
   setup() {
-    const { isWishlistSidebarOpen, toggleWishlistSidebar } = useUiState();
+    const { toggleWishlistSidebar } = useUiState();
     const { wishlist, removeFromWishlist, loadWishlist } = useWishlist();
     const { isAuthenticated } = useUser();
     const products = computed(() => wishlistGetters.getItems(wishlist.value));
@@ -111,7 +111,6 @@ export default {
       isAuthenticated,
       products,
       removeFromWishlist,
-      isWishlistSidebarOpen,
       toggleWishlistSidebar,
       totals,
       totalItems,

packages/core/nuxt-theme-module/theme/layouts/account.vue

@@ -5,8 +5,8 @@
       <AppHeader />
       <nuxt />
       <BottomNavigation />
-      <CartSidebar />
-      <LoginModal />
+      <CartSidebar v-if="isCartSidebarOpen" />
+      <LoginModal v-if="isLoginModalOpen" />
     </div>
   </div>
 </template>
@@ -15,16 +15,23 @@
 import AppHeader from '~/components/AppHeader.vue';
 import BottomNavigation from '~/components/BottomNavigation.vue';
 import TopBar from '~/components/TopBar.vue';
-import CartSidebar from '~/components/CartSidebar.vue';
-import LoginModal from '~/components/LoginModal.vue';
+import { useUiState } from '~/composables';
 
 export default {
   components: {
     TopBar,
     AppHeader,
     BottomNavigation,
-    CartSidebar,
-    LoginModal
+    CartSidebar: () => import(/* webpackChunkName: "CartSidebar" */ '~/components/CartSidebar.vue'),
+    LoginModal: () => import(/* webpackChunkName: "LoginModal" */ '~/components/LoginModal.vue')
+  },
+  setup() {
+    const { isCartSidebarOpen, isLoginModalOpen } = useUiState();
+
+    return {
+      isCartSidebarOpen,
+      isLoginModalOpen
+    };
   }
 };
 </script>

packages/core/nuxt-theme-module/theme/layouts/default.vue

@@ -1,14 +1,29 @@
 <template>
   <div>
-    <TopBar class="desktop-only" />
-    <div id="layout" >
-      <AppHeader />
-      <nuxt :key="$route.fullPath"/>
-      <BottomNavigation />
-      <AppFooter />
-      <CartSidebar />
-      <WishlistSidebar />
-      <LoginModal />
+    <LazyHydrate when-visible>
+      <TopBar class="desktop-only" />
+    </LazyHydrate>
+
+    <div id="layout">
+      <LazyHydrate when-idle>
+        <AppHeader />
+      </LazyHydrate>
+
+      <LazyHydrate when-idle>
+        <nuxt :key="$route.fullPath"/>
+      </LazyHydrate>
+
+      <LazyHydrate when-visible>
+        <BottomNavigation />
+      </LazyHydrate>
+
+      <LazyHydrate when-visible>
+        <AppFooter />
+      </LazyHydrate>
+
+      <CartSidebar v-if="isCartSidebarOpen" />
+      <WishlistSidebar v-if="isWishlistSidebarOpen" />
+      <LoginModal v-if="isLoginModalOpen" />
     </div>
   </div>
 </template>
@@ -18,21 +33,28 @@ import AppHeader from '~/components/AppHeader.vue';
 import BottomNavigation from '~/components/BottomNavigation.vue';
 import AppFooter from '~/components/AppFooter.vue';
 import TopBar from '~/components/TopBar.vue';
-import CartSidebar from '~/components/CartSidebar.vue';
-import WishlistSidebar from '~/components/WishlistSidebar.vue';
-import LoginModal from '~/components/LoginModal.vue';
-// const CartSidebar = () => import(/* webpackChunkName: "CartSidebar" */ '~/components/CartSidebar.vue')
-// const LoginModal = () => import(/* webpackChunkName: "LoginModal" */ '~/components/LoginModal.vue')
+import LazyHydrate from 'vue-lazy-hydration';
+import { useUiState } from '~/composables';
 
 export default {
   components: {
+    LazyHydrate,
     TopBar,
     AppHeader,
     BottomNavigation,
     AppFooter,
-    CartSidebar,
-    WishlistSidebar,
-    LoginModal
+    CartSidebar: () => import(/* webpackChunkName: "CartSidebar" */ '~/components/CartSidebar.vue'),
+    WishlistSidebar: () => import(/* webpackChunkName: "WishlistSidebar" */ '~/components/WishlistSidebar.vue'),
+    LoginModal: () => import(/* webpackChunkName: "LoginModal" */ '~/components/LoginModal.vue')
+  },
+  setup() {
+    const { isCartSidebarOpen, isWishlistSidebarOpen, isLoginModalOpen } = useUiState();
+
+    return {
+      isCartSidebarOpen,
+      isWishlistSidebarOpen,
+      isLoginModalOpen
+    };
   }
 };
 </script>