Vue Storefront Next

# Getting started

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

  • Commercetools API Client - A data layer of your application that connects directly to Commercetools. 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.
  • Commercetools 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/commercetools @vue-storefront/nuxt
# OR
yarn add @vue-storefront/commercetools @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/commercetools',
      '@vue-storefront/core'
    ],
    prod: [
      '@vue-storefront/commercetools',
      '@vue-storefront/core'
    ]
  }
}],
['@vue-storefront/commercetools/nuxt', {
  api: {
    uri: 'https://yourshop.com/vsf-ct-dev/graphql',
    authHost: 'https://auth.sphere.io',
    projectKey: 'vsf-ct-dev',
    clientId: '<your_client_id>',
    clientSecret: '<your_client_secret>',
    scopes: [
      'create_anonymous_token:vsf-ct-dev',
      'manage_my_orders:vsf-ct-dev',
      'manage_my_profile:vsf-ct-dev',
      'manage_my_shopping_lists:vsf-ct-dev',
      'manage_my_payments:vsf-ct-dev',
      'view_products:vsf-ct-dev',
      'view_published_products:vsf-ct-dev'
    ]
  },
  i18n: {
    useNuxtI18nModule: false,
    currency: 'USD',
    country: 'US',
    countries: [
      { name: 'US',
        label: 'United States' },
      { name: 'AT',
        label: 'Austria' },
      { name: 'DE',
        label: 'Germany' },
      { name: 'NL',
        label: 'Netherlands' }
    ],
    currencies: [
      { name: 'EUR',
        label: 'Euro' },
      { name: 'USD',
        label: 'Dollar' }
    ],
    locales: [
      {
        code: 'en',
        label: 'English',
        file: 'en.js',
        iso: 'en'
      },
      {
        code: 'de',
        label: 'German',
        file: 'de.js',
        iso: 'de'
      }
    ],
    defaultLocale: 'en',
    lazy: true,
    seo: true,
    langDir: 'lang/',
    vueI18n: {
      fallbackLocale: 'en'
    },
    detectBrowserLanguage: {
      cookieKey: 'vsf-locale'
    }
  }
}],

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

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

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

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

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

← API Client →