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 ] };