# useShippingProvider

# Features

useShippingProvider composable can be used for:

  • Loading shipping methods for the current cart.
  • Selecting shipping method for the current cart.


  • load - function for fetching shipping method. When invoked, it requests data from the API and populates the response key inside the state property. This method accepts a single optional params object. The params has the following option:

    • customQuery?: CustomQuery

      type CustomQuery = {
        getBasicProfile: string
  • save - a function for selecting a shipping method. This method accepts a single saveParams object. The saveParams has the following options:

    • shippingMethod: ShippingMethod

    • customQuery?: CustomQuery

      type ShippingMethod = Versioned & {
        __typename?: "ShippingMethod";
        id: Scalars["String"];
        version: Scalars["Long"];
        name: Scalars["String"];
        description?: Maybe<Scalars["String"]>;
        zoneRates: Array<ZoneRate>;
        isDefault: Scalars["Boolean"];
        predicate?: Maybe<Scalars["String"]>;
        createdAt: Scalars["DateTime"];
        lastModifiedAt: Scalars["DateTime"];
        key?: Maybe<Scalars["String"]>;
        lastModifiedBy?: Maybe<Initiator>;
        createdBy?: Maybe<Initiator>;
        taxCategoryRef?: Maybe<Reference>;
        taxCategory?: Maybe<TaxCategory>;
      type CustomQuery = {
        updateCart: string
  • state: ShippingProviderState - a main data object that contains a shipping method

    interface ShippingProviderState {
      response: ShippingInfo
    type ShippingInfo = {
      __typename?: "ShippingInfo";
      shippingMethodName: Scalars["String"];
      price: Money;
      shippingRate: ShippingRate;
      taxRate?: Maybe<TaxRate>;
      taxCategory?: Maybe<Reference>;
      deliveries: Array<Delivery>;
      discountedPrice?: Maybe<DiscountedLineItemPrice>;
      taxedPrice?: Maybe<TaxedItemPrice>;
      shippingMethodState: ShippingMethodState;
      shippingMethod?: Maybe<ShippingMethod>;
      shippingMethodRef?: Maybe<Reference>;
  • loading: boolean - a reactive object containing information about the loading state of your load or save method.

  • error: UseShippingProviderErrors - a reactive object containing the error message, if load or save failed for any reason.

    interface UseShippingProviderErrors {
      load?: Error;
      save?: Error;

# Getters

We do not provide getters for checkout and its parts.

# Example

import { computed } from '@nuxtjs/composition-api';
import { useShippingProvider } from '@vsf-enterprise/commercetools';
import { onSSR } from '@vue-storefront/core';

export default {
  setup () {
    const { load, state } = useShippingProvider();

    onSSR(async () => {
      await load();
    return {
      selectedShippingMethod: computed(() => state.value && state.value.response)