Vue Storefront 1.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.

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@^0.2.1

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

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

Run the Vue Storefront Installer

Now that your project has been created, you’ll need to run the Vue Storefront installer, answering the questions when prompted, using the following command:

yarn run installer

Install LexasCMS module

Next, we’ll need to download the LexasCMS module for Vue Storefront and install its dependencies.

Run the below command from the root of your project directory, this will download the LexasCMS module into the correct location in your project.

git clone https://github.com/LexasCMS/vsf-lexascms ./src/modules/vsf-lexascms

Now run the following command to install the LexasCMS modules dependencies:

yarn install

Setup the LexasCMS module

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

Add the following config to your projects config/local.json file:

"lexascms": {
  "spaceId": "YOUR_LEXASCMS_SPACE_ID"
}

Next, register the LexasCMS module by adding the following to your projects ./src/themes/capybara/config/modules.ts file:

Next, register the LexasCMS module by making the below changes to one of the following files:

import { LexascmsModule } from '../../../modules/vsf-lexascms/src';

// ...

export function registerClientModules () {
  // ...
  registerModule(LexascmsModule);
}

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 two mixins which can be added to your components for fetching either individual or collections of content items. For more detailed information about the mixins and their available options, please see the documentation.

The following code shows how you could define a new PromoBanners component for fetching your websites promo banners from LexasCMS.

<template>
  <div>
    <div v-for="promoBanner in collection.data" :key="promoBanner.id">
      <h2>{{ promoBanner.heading }}</h2>
      <p>{{ promoBanner.subheading }}</p>
      <a :href="promoBanner.link">{{ promoBanner.linkText }}</a>
    </div>
  </div>
</template>

<script>
import LexascmsCollectionMixin from 'src/modules/vsf-lexascms/src/mixins/LexascmsCollection';

export default {
  mixins: [ LexascmsCollectionMixin ]
}
</script>

This component could then be imported and used anywhere within your Vue Storefront project as follows:

<PromoBanners content-type="promoBanner" :page="{ limit: 5 }" />

You could also simplify this example further by defaulting the contentType prop in your component to promoBanner as follows:

<!-- ... -->

<script>
import LexascmsCollectionMixin from 'src/modules/vsf-lexascms/src/mixins/LexascmsCollection';

export default {
  mixins: [ LexascmsCollectionMixin ],

  props: {
    contentType: {
      type: String,
      default: 'promoBanner'
    }
  }
}
</script>

The components usage would then look something like this:

<PromoBanners :page="{ limit: 5 }" />

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.