Vue Storefront 2.x Integration Guide

This tutorial will guide you through the steps required to pull content from LexasCMS into your Vue Storefront project.

The tutorial assumes that you have a basic understanding of Vue Storefront and its concepts. If you’re new to Vue Storefront, we highly recommend checking out the documentation before proceeding.

Suggestion: Tutorial Series

In addition to this simple guide, we also have a 3 part tutorial series in which we provide a more in-depth tutorial for integrating LexasCMS with Vue Storefront 2.

This tutorial series covers everything from the minimal integration steps, through to implementing LexasCMS’s personalisation and visual preview features.

Find more using the links below:

• Part 1: Minimal LexasCMS/Vue Storefront 2 integration
• Part 2: Implementing content personalisation
• Part 3: Integrating visual content previews

Install Vue Storefront CLI

In this guide, we’re going to be using the Vue Storefront CLI to initialise your project. If you don’t already have it installed, you can do so by running one of the below commands.

# If using Yarn
yarn global add @vue-storefront/cli

# If using NPM
npm install -g @vue-storefront/cli

Create your project

Create a new Vue Storefront project by running the below command, answering the questions when prompted.

vsf init vsf-lexascms-tutorial

Navigate into your project directory

After you have created your project, navigate into the new projects directory.

cd vsf-lexascms-tutorial

Install your project dependencies

Now that your project has been created, you’ll need to run one of the following commands to install your projects dependencies:

# If using Yarn
yarn install

# If using NPM
npm install

Install LexasCMS module

Next, we’ll need to install the vsf-lexascms NPM package using one of the following commands:

# If using Yarn
yarn add vsf-lexascms

# If using NPM
npm install --save vsf-lexascms

Configure the LexasCMS module

Before you can fetch content from LexasCMS, you’ll need to configure the LexasCMS module.

Add the vsf-lexascms Nuxt module to the buildModules section of your projects nuxt.config.js file:

export default {
  // ...

  buildModules: [
    // ...

    ['vsf-lexascms/nuxt']
  ]

  // ...
};

Configure middleware

Open the middleware.config.js file in the root of your project and add the following configuration:

module.exports = {
  integrations: {
    // ...

    lexascms: {
      location: 'vsf-lexascms/server',
      configuration: {
        spaceId: 'YOUR_SPACE_ID'
      }
    }
  }
};

Fetch your content

Now that you have an initialised Vue Storefront project and you’ve installed the LexasCMS module, you’re ready to start fetching your content from LexasCMS!

The LexasCMS module provides a useContent composable which can be used for fetching either individual content items or collections of content items. For more detailed information about the useContent composable and its available options, please see the documentation.

The following code shows how you could define a small component which fetches and lists your websites promo banners from LexasCMS.

<template>
  <div id="promo-banners">
    <div v-if="loading">Loading promo banners...</div>
    <div v-if="error">Error loading promo banners!</div>
    <ul>
      <li v-for="promoBanner in promoBanners" :key="promoBanner.id">
        {{ promoBanner.title }}
      </li>
    </ul>
  </div>
</template>

<script>
import { useContent } from 'vsf-lexascms';
import { onSSR } from '@vue-storefront/core';

export default {
  name: 'PromoBanners',
  setup() {
    // useContent
    const { search, content, loading, error } = useContent();

    // Retrieve promo banners on server-side render only
    onSSR(async () => {
      await search({
        type: 'collection',
        contentType: 'promoBanner'
      });
    });

    // Return
    return {
      promoBanners: content,
      loading,
      error
    };
  }
};
</script>

Summary

In this tutorial, you’ve learned how simple it is to retrieve content from LexasCMS and display it within a Vue Storefront project.

If you would like to try it out yourself, please click here to request a free trial.