Vue Storefront 2 Integration for Spree
See it action: Vue Storefront - Spree demo
This repository contains an Spree integration for Vue Storefront 2.
This integration is being developed and maintained by Upside
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
git clone https://github.com/vuestorefront/spree.git
export BACKEND_URL=https://demo.spreecommerce.org
Or via .env.development
file:
BACKEND_URL=https://demo.spreecommerce.org
bin/setup
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
.
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'
}
}
}
}
};
You might want to serve your store under a subpath (for example: https://example.com/shop/
). In order to do that, you just have to add a BASE_URL
environment variable to the .env.production
file containing a full url.
Note that in development it will still be served on the root path (http://localhost:3000
by default) unless you change the .env.development
file too.
The monorepo contains three submodules:
For more details, refer to the official project structure.