Vue Storefront Next Integration Guide

Vue Storefront integration guide cover

Note

This guide is for integrating LexasCMS with a Vue Storefront Next project, for Vue Storefront 1.x projects, please see our 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@next

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

Create your project

Create a new Vue Storefront project by running the below command, answering the questions when prompted.

vsf init vsf-lexascms-tutorial

After you have created your project, navigate into the new projects directory.

cd vsf-lexascms-tutorial

Install your project dependencies

Now that your project has been created, you’ll need to run one of the following commands to install your projects dependencies:

# If using Yarn
yarn install

# If using NPM
npm install

Install LexasCMS module

Next, we’ll need to install the vsf-lexascms NPM package using one of the following commands:

# If using Yarn
yarn add vsf-lexascms

# If using NPM
npm install --save vsf-lexascms

Configure the LexasCMS module

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

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

export default {
  // ...

  buildModules: [
    // ...

    [ 'vsf-lexascms/nuxt', { spaceId: 'YOUR_SPACE_ID' } ]
  ]

  // ...
};

Configure the @vue-storefront/core module

Still within your projects nuxt.config.js file, add vsf-lexascms to the useRawSource config for the @vue-storefront/nuxt module:

export default {
  // ...

  buildModules: [
    [ '@vue-storefront/nuxt', {
      // ...

      useRawSource: {
        dev: [
          // ...

          'vsf-lexascms'
        ],
        prod: [
          // ...

          'vsf-lexascms'
        ]
      }

      // ...
    } ]
  ]

  // ...
};

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 a useContent composable which can be used for fetching either individual content items or collections of content items. For more detailed information about the useContent composable and its available options, please see the documentation.

The following code shows how you could define a new BlogPosts component which fetches and lists your websites blog posts from LexasCMS.

Note

The following code snippet assumes that you have created a space which contains a blogPost content type with at least a title field.

<template>
  <div id="blog-posts">
    <div v-if="loading">Loading blog posts...</div>
    <div v-if="error">Error loading blog posts!</div>
    <ul>
      <li v-for="blogPost in content" :key="blogPost.id">
        {{ blogPost.title }}
      </li>
    </ul>
  </div>
</template>

<script>
import { useContent } from 'vsf-lexascms';
import { onSSR } from '@vue-storefront/core';

export default {
  name: 'BlogPosts',
  setup() {
    // useContent
    const { search, content, loading, error } = useContent();

    // Retrieve blog posts on server-side render only
    onSSR(async () => {
      await search({
        type: 'collection',
        contentType: 'blogPost'
      });
    });

    // Return
    return {
      content,
      loading,
      error
    };
  }
};
</script>

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.