Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vuestorefront-community/spree
Vue Storefront 2 Integration for Spree
https://github.com/vuestorefront-community/spree
ecommerce javascript spree spreecommerce vue vuejs
Last synced: about 2 months ago
JSON representation
Vue Storefront 2 Integration for Spree
- Host: GitHub
- URL: https://github.com/vuestorefront-community/spree
- Owner: vuestorefront-community
- License: mit
- Created: 2021-03-17T19:49:54.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-05-30T17:25:35.000Z (over 1 year ago)
- Last Synced: 2024-05-22T16:32:51.055Z (4 months ago)
- Topics: ecommerce, javascript, spree, spreecommerce, vue, vuejs
- Language: Vue
- Homepage: https://docs.vuestorefront.io/spree
- Size: 5.63 MB
- Stars: 54
- Watchers: 6
- Forks: 37
- Open Issues: 26
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-vuestorefront - Repository
README
### Stay connected
[](https://github.com/vuestorefront/vue-storefront)
[](https://twitter.com/vuestorefront)
[](https://www.youtube.com/c/VueStorefront)
[](https://discord.vuestorefront.io)
# Vue Storefront 2 integration for Spree Commerce
See it action: [Vue Storefront - Spree demo](https://vuestorefront-spree.upsidelab.io)
## Overview
This repository contains an Spree integration for [Vue Storefront 2](https://github.com/vuestorefront/vue-storefront/).
This integration is being developed and maintained by [Upside](https://upsidelab.io)
## Requirements
- Node 14.15+
- Spree 4.3+
## Deploy in the cloud
[](https://heroku.com/deploy)
## Getting Started
The easiest way to setup a new Spree + Vue Storefront setup, is to follow out [Quick Start Guide](https://dev-docs.spreecommerce.org/getting-started/quick-start-guide).
Simply run the Spree CLI and follow the instructions:
```sh
npx @spree/cli new app
```
## Manually adding Vue Storefront to an existing Spree project
1. Clone this repository
```sh
git clone https://github.com/vuestorefront/spree.git
```
2. Set backend URL via env variable
```sh
export BACKEND_URL=https://demo.spreecommerce.org
```
Or via `.env.development` file:
```
BACKEND_URL=https://demo.spreecommerce.org
```
3. Then install dependencies and build the required packages
```sh
bin/setup
```
5. If everything built properly, you can start working on your new frontend with:
```sh
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'
}
}
}
}
};
```
## Serving under a subpath
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.
## 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](https://docs.vuestorefront.io/v2/getting-started/project-structure.html).
## Resources
- [Vue Storefront Documentation](https://docs.vuestorefront.io/v2/)
- [Spree Storefront API Documentation](https://api.spreecommerce.org/docs/api-v2/api/docs/v2/storefront/index.yaml)
## Demo
- [Vue Storefront - Spree demo](https://vuestorefront-spree.upsidelab.io) - demo instance connected to [https://demo.spreecommerce.org](https://demo.spreecommerce.org) APIs