# Upgrading to 1.5.0

# Introduction

In this release, we focused on improving the implementation of faceting. To be up-to-date with the latest features offered by commercetools, it no longer uses REST API but GraphQL API instead. It's also no longer a separate integration and is part of the commercetools integration.

We've also changed the organization's name under which we release the commercetools integration from @vue-storefront to @vsf-enterprise.

This release includes some breaking changes. However, adjusting your projects shouldn't take too long and only requires a few minor changes.

# Update dependencies

# Rename old dependencies

As stated above, we changed the organization's name under which we release commercetools integration. Open the package.json file and rename the following dependencies:

@vue-storefront/commercetools to @vsf-enterprise/commercetools
@vue-storefront/commercetools-api to @vsf-enterprise/commercetools-api

# Add new and remove old packages

Firstly add @vsf-enterprise/commercetools-api package (if it's not already installed).

yarn add @vsf-enterprise/commercetools-api

Starting this release, we require a new dependency:

vue-lazy-hydration in version 2.0.0-beta.4.

We also no longer use the @vue-storefront/nuxt-theme dependency.

To update your project, run the following commands:

yarn add vue-lazy-hydration@~2.0.0-beta.4
yarn remove @vue-storefront/nuxt-theme

# Update configuration files

# `middleware.config.js`

Open middleware.config.js file and replace @vue-storefront/commercetools-api/server with @vsf-enterprise/commercetools-api/server for location inside ct section.

// middleware.config.js
module.exports = {
  integrations: {
    ct: {
-     location: '@vue-storefront/commercetools-api/server',
+     location: '@vsf-enterprise/commercetools-api/server',
      configuration: {
        // irrelevant configuration was omitted for readability
      }
    },
  }
};

Remove extensions line from ct section.

// middleware.config.js
module.exports = {
  integrations: {
    ct: {
      location: '@vsf-enterprise/commercetools-api/server',
-      extensions: existing => existing.concat('@vsf-enterprise/commercetools/extensions'),
      configuration: {
        // irrelevant configuration was omitted for readability
      }
    },

Remove ctf section. It will no longer be used as faceting is now part of commercetools integration.

// middleware.config.js
module.exports = {
  integrations: {
    // ct integration config
-   ctf: {
-     location: '@vsf-enterprise/ct-faceting/server',
-     configuration: {
-       api: {
-         authHost: 'https://auth.sphere.io',
-         projectKey: '<PROJECT_KEY>',
-         clientId: '<CLIENT_ID>',
-         clientSecret: '<CLIENT_SECRET>',
-         scopes: [
-           /* scope rules */
-         ]
-       },
-       faceting: {
-         host: 'https://api.commercetools.com'
-       }
-     }
-   }
  }
};

# `nuxt.config.js`

Default configuration for faceting is no longer provided by external package @vsf-enterprise/ct-faceting. Now it is placed in nuxt.config.js under buildModules section and in @vsf-enterprise/commercetools/nuxt module. If you don't have default configuration or you need more details please refer to Configuration section of the useFacet composable.

Context configuration access

Since we're removing $ctf object from the middleware configuration, and still referring to the application context with it, now all the faceting configuration data will be available from the $ct key/object.

Example:

// before
const { $ctf: { config }} = useVSFContext();
// now
const { $ct: { config: { faceting } }} = useVSFContext();

Please be aware that with defining facets your commercetools data structure might be different, and reaching for specific objects might need some adjustments.

We no longer use the @vue-storefront/nuxt-theme package which registered default routing paths (we will remove it after). They need to be configured in the nuxt.config.js file.

To do it, use the extendRoutes function in the nuxt.config.js.

// nuxt.config.js
router: {
  // other configuration options
  extendRoutes(routes, resolve) {
    routes.push({
      name: 'home',
      path: '/',
      component: resolve(__dirname, 'pages/Home.vue')
    },
    {
      name: 'product',
      path: '/p/:id/:slug/',
      component: resolve(__dirname, 'pages/Product.vue')
    },
    {
      name: 'category',
      path: '/c/:slug_1/:slug_2?/:slug_3?/:slug_4?/:slug_5?',
      component: resolve(__dirname, 'pages/Category.vue')
    },
    {
      name: 'my-account',
      path: '/my-account/:pageName?',
      component: resolve(__dirname, 'pages/MyAccount.vue')
    },
    {
      name: 'checkout',
      path: '/checkout',
      component: resolve(__dirname, 'pages/Checkout.vue'),
      children: [
        {
          path: 'shipping',
          name: 'shipping',
          component: resolve(__dirname, 'pages/Checkout/Shipping.vue')
        },
        {
          path: 'billing',
          name: 'billing',
          component: resolve(__dirname, 'pages/Checkout/Billing.vue')
        },
        {
          path: 'payment',
          name: 'payment',
          component: resolve(__dirname, 'pages/Checkout/Payment.vue')
        },
        {
          path: 'thank-you',
          name: 'thank-you',
          component: resolve(__dirname, 'pages/Checkout/ThankYou.vue')
        }
      ]
    },
    {
      name: 'reset-password',
      path: '/reset-password',
      component: resolve(__dirname, 'pages/ResetPassword.vue')
    });
  }
},

TIP

Routes configuration can be moved to a separate file and imported into the nuxt.config.js file to increase the readability.

@vue-storefront/nuxt-theme package needs to be removed from buildModules section.

  buildModules: [
-   ['@vue-storefront/nuxt-theme'],

As faceting is now part of commercetools integration, the configuration inside buildModules is no longer needed and has to be removed.

  buildModules: [
-   ['@vsf-enterprise/ct-faceting/nuxt', {
-       apiConfigModule: '@vsf-enterprise/commercetools/nuxt'
-   }]

Update configuration of the @vue-storefront/nuxt module by replacing @vue-storefront/commercetools with @vsf-enterprise/commercetools in useRawSource object.

  ['@vue-storefront/nuxt', {
    useRawSource: {
      dev: [
        '@vue-storefront/core',
-       '@vue-storefront/commercetools'
+       '@vsf-enterprise/commercetools'
      ],
      prod: [
        '@vue-storefront/core',
-       '@vue-storefront/commercetools'
+       '@vsf-enterprise/commercetools'
      ]
    }
  }]

# Update imports

The final step is to replace ALL @vue-storefront/commercetools imports with @vsf-enterprise/commercetools in *.vue template file.

- import { useUser } from '@vue-storefront/commercetools';
+ import { useUser } from '@vsf-enterprise/commercetools';

The same applies to @vue-storefront/commercetools-api, if it's used in the project. It has to be replaced with @vsf-enterprise/commercetools-api.

- import { Category } from '@vue-storefront/commercetools-api';
+ import { Category } from '@vsf-enterprise/commercetools-api';

# Optional: Redis cache

In this version, we've added support for Redis cache out of the box for new projects. If you want to use it, please follow the instructions below. If not, you can skip this step.

You can read more about our implementation of Redis cache on SSR Cache page.

# Add new packages

Start by installing required dependencies:

@vue-storefront/cache in version 2.5.3
@vsf-enterprise/redis-cache in version 1.3.0

To update your project, run the following commands:

yarn add @vue-storefront/cache@~2.5.3
yarn add @vsf-enterprise/redis-cache@~1.3.0

# Add body parser server middleware

Create a body-parser.js file inside of the serverMiddleware directory with the following code:

// ./serverMiddleware/body-parser.js
const bodyParser = require('body-parser')
const app = require('express')()

app.use(bodyParser.json())
module.exports = app

Add the location of the body-parser.js file to the serverMiddleware array in nuxt.config.js.

serverMiddleware: [
  '~/serverMiddleware/body-parser.js'
],

# Extend configuration

In the nuxt.config.js file, update the modules section by adding the @vue-storefront/cache/nuxt module with the following configuration.

  modules: [
    // other modules
    ['@vue-storefront/cache/nuxt', {
      enabled: process.env.VSF_REDIS_ENABLED === 'true',
      invalidation: {
        endpoint: process.env.CACHE_INVALIDATE_URL,
        key: process.env.CACHE_INVALIDATE_KEY,
        handlers: [
          '@vue-storefront/cache/defaultHandler'
        ]
      },
      driver: [
        '@vsf-enterprise/redis-cache',
        {
          // docs: https://github.com/luin/ioredis/blob/master/API.md#new-redisport-host-options
          redis: {
            keyPrefix: process.env.VSF_REDIS_KEY_PREFIX,
            host: process.env.VSF_REDIS_HOST,
            port: process.env.VSF_REDIS_PORT || 6379,
            password: process.env.VSF_REDIS_PASSWORD
          }
        }
      ]
    }]
  ],

# Update template file

As the last step, update template files that use useCache composable. Start by adding an import statement:

import { useCache, CacheTagPrefix } from '@vue-storefront/cache';

Then, use the useCache composable in the setup function to add proper tags. Below is a code example of handling tags on the Category page.

setup() {
  const { addTags } = useCache();

  onSSR(() => {
    const tags = [{ prefix: CacheTagPrefix.View, value: 'category' }];
    const productTags = products.value.map((prod) => {
      return { prefix: CacheTagPrefix.Product, value: prod._id };
    });
    const categoriesTags = categoryTree.value.items.map((cat) => {
      return { prefix: CacheTagPrefix.Category, value: cat.id };
    });

    addTags(tags.concat(productTags, categoriesTags));
  });
}

Test your knowledge →