vsf-lexascms
LexasCMS.
This is the official Vue Storefront module for retrieving content fromInstallation •
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.