Vue Storefront 2.5.0 is here, embracing Nuxt Composition API

We published the Vue Storefront 2.5.0 version with plenty of new bug fixes and improvements, but there are some that deserve a special shoutout. Here we go.

First things first: to help the application's performance and create a faster and more reliable experience for the final user, we removed the generation of the Cookies from the SSR (server-side rendering) process. Now, it is generated directly on the client-side.

Check it out on GitHub: PR #6442

But it is just the beginning.

The best news is the update of the @vue/composition-api from the 1.0.0-beta-21 to the more recent and more complete @nuxtjs/composition-api.

What do you gain? This update brings all Vue Storefront applications a lot of new composable and the possibility to stay up to date with the latest version of the framework.

Now, it's possible to use correctly the useRoute & useRouter composable.

For example, in a product page, we can simplify how the search for the product and redirect of a user can be applied using only composable functions.

<script>
import { useProduct } from '@vue-storefront/{integration}';
import { onSSR } from '@vue-storefront/core';
import { useRoute, useRouter, useContext } from '@nuxtjs/composition-api';

export default {
  setup() {
    // Get current route and router
    const route = useRoute();
    const router = useRouter();
    const { params: { id } } = route.value;

    const {
      search,
      products,
      loading,
      error: productError,
    } = useProduct(`product-${id}`);
    const { error } = useContext();

    onSSR(async () => {
      // Search for a product with a given ID
      await search({ id });

      if (productError.value) error({ statusCode: 404 });
    });

    // Redirect user to the home page
    const redirectToHome = async () => router.push('/');

    return {
      redirectToHome,
      products,
      loading,
    };
  }
}
</script>

Creating a better SEO directly aligned in the setup() function with the useMeta composable.

To achieve this in your product or CMS page with custom SEO information, using the new useMeta composable, it's easier and you don't need any trick or custom code to send the data back to the component itself.

<script>
import { useProduct, productGetters } from '@vue-storefront/{integration}';
import { useMeta } from '@nuxtjs/composition-api'

export default {
  // You need to define an empty head to activate this functionality
  head: {},
  setup() {
    const { products } = useProduct();

    // Defining the page title
    useMeta(() => ({ title: productGetters.getName(product.value) }))
  },
}
</script>

But one of the most important things is that it's the beginning of the way to future application updates. This update will make it easier to update for future releases of Nuxt and related frameworks.

If you are looking to update your store to the newest version, it's recommended to follow our migration guide to get a more in-depth guide in this process.

For those who want to have a TL:DR; the update process, we can summarize the upgrade guide, but it's always recommended to follow the guide if you have any trouble.

Installing the new version

Install the new versions of Vue Storefront to 2.5.0, and install the @nuxtjs/composition-api.

Finally, remove the old @vue/composition-api version 1.0.0-beta-21

Import the Module

On your nuxt.config.js file, find the buildModules property, and add the @nuxtjs/composition-api/module as the first item of the Array.

Replace the old composition API plugin with the new one

Find in your code and replace all the usages from @vue/composition-api to @nuxtjs/composition-api

It's done. You now are on the newest version with the newest version of @nuxtjs/composition-api.

Before:

import { ref, computed } from '@vue/composition-api';

After:

import { ref, computed } from '@nuxtjs/composition-api';

But remember, this is a simple guide. More steps need to be done to get it complete, like updating the usage of the useRoute & useRouter, for you to finalize the update to @nuxtjs/composition-api

Here you can find an example of how to update the router usage in your application.

Before

<script>
import { useContent } from '{INTEGRATION}';

export default {
  setup(props, context) {
    const { 
      search,
      error: cmsError,
    } = useContent();
    // Get ID from URL query params
    const { id } = context.root.$route.params;

    onSSR(async () => {
      // Search for the CMS page
      await search({ id });
      
      if(cmsError.value) await context.root.$router.push('/');
    });
  }
}
</script>

After:

<script>
import { useContent } from '{INTEGRATION}';
import { useRoute, useRouter } from '@nuxtjs/composition-api';

export default {
  setup() {
    // Get current route and router
    const route = useRoute();
    const router = useRouter();

    const {
      search,
      error: cmsError,
    } = useContent();
    // Get ID from URL query params
    const { params: { id } } = route.value;

    onSSR(async () => {
      // Search for the CMS page
      await search({ id });

      if(cmsError.value) await router.push('/');
    });
  }
}
</script>

Update the internationalization module order

Using our internal internationalization logic, you also have to update your nuxt.config.js to complete the migration to the latest version.

On the nuxt.config.js file, in the modules property, you have to move the nuxt-i18n to be the last one after the integrations.

Example:

Before:

export default {

modules: [

['nuxt-i18n', {

baseUrl: process.env.BASE_URL || 'http://localhost:3000'

}],

'@vsf-enterprise/algolia/nuxt',

['@vsf-enterprise/adyen/nuxt', {}]

// other non-integration modules

]

};

After:

export default {

modules: [

'@vsf-enterprise/algolia/nuxt',

['@vsf-enterprise/adyen/nuxt', {}],

['nuxt-i18n', {

baseUrl: process.env.BASE_URL || 'http://localhost:3000'

}],

// other non-integration modules

]

};