@vue-storefront/nuxt 2.4.5 → 2.5.2

package/lib/module.js

@@ -11,7 +11,7 @@ const rawSourcesModule = require('./modules/raw-sources-loader');
 module.exports = function VueStorefrontNuxtModule (moduleOptions) {
   const defaultOptions = {
     coreDevelopment: false,
-    performance : {
+    performance: {
       httpPush: true,
       purgeCSS: {
         enabled: false,
@@ -76,10 +76,6 @@ module.exports = function VueStorefrontNuxtModule (moduleOptions) {
   });
   log.success('Installed Internationalization Cookies plugin');
 
-  // Composition API plugin
-  this.addModule('@nuxtjs/composition-api');
-  log.success('Installed nuxt Composition API Module');
-
   // StorefrontUI module
   if (fs.existsSync(resolveDependency('@storefront-ui/vue'))) {
     storefrontUiModule.call(this, options);
@@ -92,6 +88,6 @@ module.exports = function VueStorefrontNuxtModule (moduleOptions) {
 
   // Raw sources loader
   rawSourcesModule.call(this, options);
-}
+};
 
-module.exports.meta = require('../package.json')
+module.exports.meta = require('../package.json');

package/lib/plugins/context.js

@@ -1,5 +1,5 @@
 
-import { configureContext } from '@vue-storefront/core'
+import { configureContext } from '@vue-storefront/core';
 import { useContext as useBaseContext } from '@nuxtjs/composition-api';
 
 const contextPlugin = (ctx, inject) => {
@@ -8,11 +8,11 @@ const contextPlugin = (ctx, inject) => {
   const useVSFContext = () => {
     const { $vsf, ...context } = useBaseContext();
 
-    return { $vsf, ...context, ...$vsf }
-  }
+    return { $vsf, ...context, ...$vsf };
+  };
 
   configureContext({ useVSFContext });
-  inject('sharedRefsMap', sharedMap)
+  inject('sharedRefsMap', sharedMap);
 };
 
 export default contextPlugin;

package/lib/plugins/i18n-cookies.js

@@ -1,39 +1,90 @@
-const { VSF_CURRENCY_COOKIE, VSF_COUNTRY_COOKIE } = require('@vue-storefront/core');
+import { i18nRedirectsUtil, VSF_COUNTRY_COOKIE, VSF_CURRENCY_COOKIE, VSF_LOCALE_COOKIE } from '@vue-storefront/core';
 
-const i18nCookiesPlugin = ({ $cookies }) => {
-  const i18n = <%= serialize(options) %>;
+const i18nCookiesPlugin = ({ $cookies, i18n, app, redirect }) => {
+  const i18nOptions = <%= serialize(options) %>;
+  const isServer = typeof window === 'undefined';
+  const navigator = isServer ? undefined : window.navigator;
+  const acceptedLanguage = app.context.req?.headers?.['accept-language'] || navigator?.languages || '';
+  const isRouteValid = !!app.context.route.name;
+  const cookieNames = {
+    currency: i18nOptions.cookies?.currencyCookieName || VSF_CURRENCY_COOKIE,
+    country: i18nOptions.cookies?.countryCookieName || VSF_COUNTRY_COOKIE,
+    locale: i18nOptions.cookies?.localeCookieName || VSF_LOCALE_COOKIE
+  }
+  const cookieLocale = $cookies.get(cookieNames.locale);
+  const cookieCurrency = $cookies.get(cookieNames.currency);
+
+  const getCurrencyByLocale = (locale) =>
+    i18n.numberFormats?.[locale]?.currency?.currency
+    || i18nOptions.currency
+    || (i18nOptions.currencies.length && i18nOptions.currencies[0].name);
+
+  const utils = i18nRedirectsUtil({
+    path: app.context.route.path,
+    defaultLocale: i18nOptions.defaultLocale,
+    availableLocales: i18nOptions.locales.map((item) => item.code),
+    acceptedLanguages: isServer ? acceptedLanguage.split(',').map((item) => item.split(';')[0]) : acceptedLanguage,
+    cookieLocale
+  });
+
+  const targetLocale = utils.getTargetLocale();
+  const redirectPath = utils.getRedirectPath();
+
+  if (!isRouteValid) {
+    app.i18n.setLocale(targetLocale);
+  }
 
+  if (isServer) {
+    app.i18n.cookieValues = {
+      [cookieNames.locale]: targetLocale,
+      [cookieNames.currency]: getCurrencyByLocale(targetLocale)
+    };
+
+    if (redirectPath) {
+      redirect(redirectPath);
+    }
+
+    return;
+  }
+  const cookieOptions = {
+    path: '/',
+    sameSite: 'lax',
+    expires: new Date(new Date().setFullYear(new Date().getFullYear() + 1)) // Year from now
+  };
   const settings = {
-    defaultLocale: i18n.defaultLocale || (i18n.locales.length && i18n.locales[0].code),
-    currency: i18n.currency || (i18n.currencies.length && i18n.currencies[0].name),
-    country: i18n.country || (i18n.countries.length && i18n.countries[0].name)
+    locale: targetLocale,
+    currency: getCurrencyByLocale(targetLocale),
+    country: i18nOptions.country || (i18nOptions.countries.length && i18nOptions.countries[0].name)
   };
 
   const missingFields = Object
     .entries(settings)
     .reduce((carry, [name, value]) => {
-      !value && carry.push(name);
-
-      return carry;
+      return [
+        ...carry,
+        ...(!value ? [name] : [])
+      ]
     }, []);
 
   if (missingFields.length) {
-    throw new Error(`Following fields are missing in the i18n configuration: ${ missingFields.join(', ') }`);
+    throw new Error(`Following fields are missing in the i18n configuration: ${missingFields.join(', ')}`);
   }
 
-  const cookieOptions = {
-    path: '/',
-    sameSite: 'lax',
-    expires: new Date(new Date().setFullYear(new Date().getFullYear() + 1)) // Year from now
-  };
+  if (cookieLocale !== settings.locale) {
+    $cookies.set(cookieNames.locale, settings.locale, cookieOptions);
+  }
 
-  const cookieNames = {
-    currency: i18n.cookies?.currencyCookieName || VSF_CURRENCY_COOKIE,
-    country: i18n.cookies?.countryCookieName || VSF_COUNTRY_COOKIE
+  if (cookieCurrency !== settings.currency) {
+    $cookies.set(cookieNames.currency, settings.currency, cookieOptions);
   }
 
-  !$cookies.get(cookieNames.currency) && $cookies.set(cookieNames.currency, settings.currency, cookieOptions);
   !$cookies.get(cookieNames.country) && $cookies.set(cookieNames.country, settings.country, cookieOptions);
-};
+
+  i18n.onBeforeLanguageSwitch = (oldLocale, newLocale, isInitialSetup, context) => {
+    $cookies.set(cookieNames.locale, newLocale, cookieOptions);
+    $cookies.set(cookieNames.currency, getCurrencyByLocale(newLocale), cookieOptions);
+    window.location.href = context.route.fullPath;
+  }
+}
 
 export default i18nCookiesPlugin;

package/lib/plugins/ssr.js

@@ -1,16 +1,16 @@
-import { configureSSR } from '@vue-storefront/core'
+import { configureSSR } from '@vue-storefront/core';
 import { ssrRef, getCurrentInstance, onServerPrefetch } from '@nuxtjs/composition-api';
 
 const hasRouteChanged = (ctx) => {
-  const { from } = ctx.$router.app.context;
-  const { current } = ctx.$router.history
+  const { from } = ctx.proxy.$router.app.context;
+  const { current } = ctx.proxy.$router.history;
 
   if (!from) {
-    return false
+    return false;
   }
 
-  return from.fullPath !== current.fullPath
-}
+  return from.fullPath !== current.fullPath;
+};
 
 const ssrPlugin = () => {
   configureSSR({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue-storefront/nuxt",
-  "version": "2.4.5",
+  "version": "2.5.2",
   "description": "",
   "main": "lib/module.js",
   "scripts": {
@@ -10,8 +10,7 @@
   "license": "MIT",
   "dependencies": {
     "@nuxt/typescript-build": "^2.0.0",
-    "@vue/composition-api": "1.0.0-beta.21",
-    "@nuxtjs/composition-api": "0.17.0",
+    "@nuxtjs/composition-api": "^0.29.3",
     "@nuxtjs/style-resources": "^1.0.0",
     "chalk": "^2.4.2",
     "chokidar": "^3.3.1",
@@ -20,7 +19,7 @@
     "nuxt-purgecss": "^1.0.0"
   },
   "devDependencies": {
-    "@nuxt/types": "^0.7.9"
+    "@nuxt/types": "^2.15.8"
   },
   "publishConfig": {
     "access": "public"

package/lib/plugins/composition-api.js

@@ -1,4 +0,0 @@
-import Vue from 'vue';
-import VueCompositionApi from '@vue/composition-api';
-
-Vue.use(VueCompositionApi);