Vue Storefront Next

# Getting started

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

  • AboutYouCloud API Client - A data layer of your application that connects directly to AboutYouCloud. 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.
  • AboutYouCloud 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:

npm install --save @vue-storefront/about-you @vue-storefront/nuxt
# OR
yarn add @vue-storefront/about-you @vue-storefront/nuxt

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', {
  useRawSource: {
    dev: [
      '@vue-storefront/about-you',
      '@vue-storefront/core'
    ],
    prod: [
      '@vue-storefront/about-you',
      '@vue-storefront/core'
    ]
  }
}],
['@vue-storefront/about-you/nuxt', {
  api: {
    host: 'https://yourwebsite.com/v1/',
    auth: {
      username: 'yourusername',
      password: 'yourpassword'
    }
  },
  imgUrl: 'https://yourwebsite/saintlouis',
}]

@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/about-you @vue-storefront/about-you-api
# OR
yarn add @vue-storefront/about-you @vue-storefront/about-you-api

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

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

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

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

← API Client →