vsf-next-lexascms

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

Installation •
How To Use •
Full Example •
License

Installation

Fetching a collection
- Supported parameters

  <li>
    <a rel="nofollow noopener" target="_blank" href="#fetching-a-single-item">Fetching a single item</a></p> <ul dir="auto">
      <li>
        <a rel="nofollow noopener" target="_blank" href="#supported-parameters-1">Supported parameters</a>
      </li>
    </ul>
  </li>
  
  <li>
    <a rel="nofollow noopener" target="_blank" href="#request-context">Request Context</a>
  </li>
  <li>
    <a rel="nofollow noopener" target="_blank" href="#supporting-content-previews">Supporting Content Previews</a>
  </li>
</ul>

Full Example
Tutorials
License

Installation

Please follow the below instructions to install vsf-lexascms in your Vue Storefront Next project.

1. Install the NPM package

Install the vsf-lexascms NPM package by running one of the following commands:

# Yarn
yarn add vsf-lexascms

# NPM
npm install vsf-lexascms

2. Configure the module

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

export default {
  // ...

  buildModules: [
    // ...

    ['vsf-lexascms/nuxt']
  ]

  // ...
};

3. 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',
        apiKey: 'YOUR_API_KEY' // Optional, unless using content previews
      }
    }
  }
};

How To Use

Once you have installed the vsf-lexascms module, content can be retrieved using the useContent composable.

import { useContent } from 'vsf-lexascms';

const { search, content, loading, error } = useContent();

search is a function and is used for retrieving content from LexasCMS.
content, loading and error are all computed properties which are populated by the search method
- content contains the content retrieved by the search method
- loading is a boolean which communicates whether the search method is currently running or not
- error is null unless an error is thrown by the search method, in which case this contains the error message

Fetching a collection

The following code snippet shows an example of how you could retrieve a collection of promo banners from LexasCMS.

import { useContent } from 'vsf-lexascms';

export default {
  setup() {
    const { search, content, loading, error } = useContent();

    await search({
      type: 'collection',
      contentType: 'promoBanners'

      // Optionally provide additional params, see supported parameters below
      // params: {
      //   
      // }
      //
      // Override the request context for this request, see the 'Request Context' section for more details
      // context: {
      //
      // }
    });

    return { content, loading, error };
  }
};

Supported parameters

As suggested in the code snippet above, you can also pass some additional parameters for making your queries more specific (e.g. filtering, localisation etc.).

Name
Type
Required
Example
Comments

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

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

include
String
N
backgroundImage
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
See ordering documentation for more info.

Fetching a single item

The following code snippet shows an example of how you could retrieve an individual promo banner from LexasCMS.

import { useContent } from 'vsf-lexascms';

export default {
  setup() {
    const { search, content, loading, error } = useContent();

    await search({
      type: 'item',
      contentType: 'promoBanner',
      itemId: 'example-promo-banner-id'

      // Optionally provide additional params, see supported parameters below
      // params: {
      //   
      // }
      //
      // Override the request context for this request, see the 'Request Context' section for more details
      // context: {
      //
      // }
    });

    return { content, loading, error };
  }
};

Supported parameters

As suggested in the code snippet above, you can also pass some additional parameters for making your queries more specific (e.g. localisation, pagination etc.).

Name
Type
Required
Example
Comments

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

include
String
N
backgroundImage
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 pass the context property to the search function.
The following snippet shows an example of setting the request context:

import { useContent } from 'vsf-lexascms';

export default {
  setup() {
    const { search, content, loading, error } = useContent();

    await search({
      type: 'collection',
      contentType: 'promoBanner',
      context: {
        audienceAttributes: {
          age: 25,
          location: 'GB'
        }
      }
    });

    return { content, loading, error };
  }
};

Supporting Content Previews

When making use of LexasCMS’s visual content previews feature, LexasCMS will load your website with the lexascmsRequestContent query parameter.
The value of this parameter will be a pre-encoded request context, which should be provided directly to all requests to the Content Delivery API.
The following snippet shows an example of how this could be achieved:

import { useContent } from 'vsf-lexascms';

export default {
  setup(_, context) {
    const { search, content, loading, error } = useContent();

    await search({
      type: 'collection',
      contentType: 'promoBanner',
      context: context.root.$route.query.lexascmsRequestContext ?? null
    });

    return { content, loading, error };
  }
};

Full Example

The below code shows a full example of how you could create a small component which lists the available promo banners:

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

Tutorials

Prefer a more guided tutorial? Check out our 3 part tutorial series using the links below:

License

This project is licensed under the MIT License.

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

Table of Contents

Installation

1. Install the NPM package

2. Configure the module

3. Configure middleware

How To Use

Fetching a collection

Supported parameters

Fetching a single item

Supported parameters

Request Context

Supporting Content Previews

Full Example

Tutorials

License