Skip to main content
  1. All Posts/

vsf-lexascms

eCommerce TypeScript

This is the official Vue Storefront module for retrieving content from LexasCMS.

Installation
How To Use
Example
License

Table of Contents

Installation

1. Install the module

Run the following commands from the root directory of your Vue Storefront project.

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

These commands will install the module into the correct location in your project and install the modules dependencies.

2. Configure the module

Configure your LexasCMS space ID by adding the following to your config/local.json file.

"lexascms": {
  "spaceId": "YOUR_LEXASCMS_SPACE_ID",
  "apiKey": "YOUR_LEXASCMS_API_KEY" // Optional, unless using content previews
}

3. Register the module

Register the vsf-lexascms module by adding the following to your ./src/modules/client.ts file.

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

// ...

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

How To Use

Under the hood, this module makes use of LexasCMS’ JSON:API (REST) content delivery API. For further information, please see the documentation.
The vsf-lexascms module provides two mixins which can be used to retrieve content from LexasCMS.

LexascmsCollection

The LexascmsCollection mixin is used for retrieving multiple items of a particular content type.
Add the mixin to the component in which you would like to retrieve content from LexasCMS.

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

export default {
  mixins: [ LexascmsCollectionMixin ]
}

Your component will now accept the following props to configure which content should be retrieved. The retrieved content is made accessible via the collection computed property.

Name
Type
Required
Example
Comments

contentType
String
Y
blogPost
The type of content to be retrieved.

context
Object
N
{ audienceAttributes: { age: 25 } }
See request context documentation for more info.

fields
Object
N
{ blogPost: 'title,publishedAt' }
See sparse fieldsets documentation for more info.

filter
Object
N
{ title: { _startsWith: 'Hello' } }
See filtering documentation for more info.

include
String
N
author,coverImage
See fetching records documentation for more info.

localeCode
String
N
en-GB
See localisation documentation for more info.

page
Object
N
{ limit: 2, skip: 4 }
See pagination documentation for more info.

sort
String
N
title,-publishedAt
See ordering documentation for more info.

LexascmsItem

The LexascmsItem mixin is used for retrieving a specific individual content item.
Add the mixin to the component in which you would like to retrieve content from LexasCMS.

import LexascmsItemMixin from 'src/modules/vsf-lexascms/src/mixins/LexascmsItem';

export default {
  mixins: [ LexascmsItemMixin ]
}

Your component will now accept the following props to configure which content item should be retrieved. The retrieved content item is made accessible via the item computed property.

Name
Type
Required
Example
Comments

contentType
String
Y
blogPost
The type of content to be retrieved.

context
Object
N
{ audienceAttributes: { age: 25 } }
See request context documentation for more info.

id
String
Y
1234
The ID of the content item to be retrieved.

fields
Object
N
{ blogPost: 'title,publishedAt' }
See sparse fieldsets documentation for more info.

include
String
N
author,coverImage
See fetching records documentation for more info.

localeCode
String
N
en-GB
See localisation documentation for more info.

page
Object
N
{ relationshipField: { limit: 2, skip: 4 } }
See pagination documentation for more info.

Request Context

In the event that you would like to provide a request context with your requests to LexasCMS (i.e. for content personalisation), you can dispatch the vsf-lexascms/setRequestContext store action.
You can dispatch this action from anywhere that you have access to the store, and it will automatically attach the provided context to all subsequent requests that are made to LexasCMS.
Note: You can also retrieve the current request context from the store by accessing the vsf-lexascms/requestContext getter.
The following example shows how you could attach a request context from the serverPrefetch hook of your themes top level App component.