Stay connected

Vue Storefront 2 integration for Spree Commerce

See it action: Vue Storefront - Spree demo

Overview

This repository contains an Spree integration for Vue Storefront 2.

This integration is being developed and maintained by Upside

Requirements

Node 14.15+
Spree 4.3+

Deploy in the cloud

Getting Started

The easiest way to setup a new Spree + Vue Storefront setup, is to follow out Quick Start Guide.

Simply run the Spree CLI and follow the instructions:

npx @spree/cli new app

Manually adding Vue Storefront to an existing Spree project

Clone this repository

git clone https://github.com/vuestorefront/spree.git

Set backend URL via env variable

export BACKEND_URL=https://demo.spreecommerce.org

Or via .env.development file:

BACKEND_URL=https://demo.spreecommerce.org

Then install dependencies and build the required packages

bin/setup

If everything built properly, you can start working on your new frontend with:

bin/start

Changing some parts of the code (notably the api-client) will trigger a re-build but the change will not be hot-reloaded. To ensure that the app sees you changes, re-run either yarn build or yarn dev.

Enabling optional features

Some features that are either provided by Spree's extensions or that are only available in newer versions, need to be manually enabled in the configuration file. To do that, open the packages/theme/middleware.config.js and update the configuration to desired state

module.exports = {
  integrations: {
    spree: {
      location: '@vue-storefront/spree-api/server',
      configuration: {
        backendUrl: process.env.BACKEND_URL,
        assetsUrl: process.env.ASSETS_URL,
        spreeFeatures: {
          // Associate guest cart after the customer logs in. Requires Spree 4.3+
          associateGuestCart: false,
          // Fetch basic information about products from the `primary_variant` relationship. Requires Spree 4.3+
          fetchPrimaryVariant: false,
          // Wishlist for authenticated users.
          // Accepted values: 'enabled' (Spree 4.4+), 'legacy' (Spree with `spree_wishlist` gem), 'disabled'.
          wishlist:  'disabled'
        }
      }
    }
  }
};

Repository structure

The monorepo contains three submodules:

api-client - low level backend API connector, utilizing Spree's v2 Storefront API
composables - reusable business logic
theme - Nuxt.js-based frontend application

For more details, refer to the official project structure.

Resources

Demo

Vue Storefront - Spree demo - demo instance connected to https://demo.spreecommerce.org APIs