Vue Storefront Integration Guide

Vue Storefront integration guide cover

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

# 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.

Note

When asked if you would like to use the friendly installer or install Vue Storefront manually, please select manual installation.

vsf init vsf-lexascms-tutorial

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 using the following command:

Note

Vue Storefront projects make use Yarn specific features such as workspaces. As a result, this step must be completed using Yarn.

We're also using the --default-config flag in this tutorial in order to skip over the installers questions. In a real project you would likely want to omit this flag.

yarn run installer --default-config

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/modules/client.ts file:

import { LexascmsModule } from './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.

Note

The following code snippet assumes that you have created a space which contains a promoBanner content type with the following fields: heading, subheading, link and linkText.

<template>
  <div>
    <div v-for="promoBanner in collection" :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 create a new account.

© 2020 Status200 Ltd.