Vue Storefront Next

Developer Preview

The integration is currently on developer Preview phase and could be unstable. We recommend checking it out on our repository. Simply copy the repo (opens new window) and run

yarn && yarn build:sp && yarn dev:sp

# Getting started

To start working with Vue Storefront for Shopify you have to install two core packages that will integrate your Shopify instance with Vue Storefront.

  • Shopify API Client - A data layer of your application that connects directly to Shopify. It provides a friendly abstraction layer over network calls with some additional overriding capabilities. It can be used as it is in any JavaScript application but doesn't provide much value by itself. API Client is usually used in the combination with Composition Functions package and is not used directly in the UI layer.
  • Shopify Composition Functions - A set of declarative composition API functions allowing to interact with eCommerce logic in your Vue application that provides additional functionalities like Vue reactivity, SSR support, client-side request caching etc. This is the main integration package and it uses API Client under the hood.

# Installation

Best for new projects

If you're starting a new Vue Storefront project and you're ok with using Nuxt using CLI its the best option for you.

This is the easiest and fastest way of bootstrapping new Vue Storefront project. With Vue Storefront CLI you can generate preconfigured, working boilerplate shop in one minute!

npm i -g @vue-storefront/cli@next

vsf init <project-name>

# Nuxt project installation

First, install the packages:

Once packages are installed you need to add VSF Nuxt module, and integration Nuxt Module in nuxt.config.js to the buildModules section:

@vue-storefront/nuxt - allows to use raw source for listed packages and adds dedicated plugins
@vue-storefront/<backend_name>/nuxt - installs integration with eCommerce backend

# Non-Nuxt project installation

First, install the packages:

npm install --save @vue-storefront/shopify @vue-storefront/shopify-api
# OR
yarn add @vue-storefront/shopify @vue-storefront/shopify-api

Once packages are installed you need to invoke the setup method that will configure your Shopify integration before using any other method from the integration. You can read how to configure it here.

import { setup } from '@vue-storefront/shopify-api'

setup({
  // configuration of your eCommerce integration
})

In the next chapters, you will learn in-depth about Shopify API Client and Composition API functions.

← API Client →