By default, the SDK will inject some helpers to all components.

$JsonApi

For full documentation, please check jsonapi-client-js

Example:

<!-- Your component -->
<template>
  <div></div>
</template>

<script>
export default {

  created() {

    // Build a JSON:API document
    let exampleDocument = new this.$JsonApi;
    let exampleResource = exampleDocument.makeResource();
    exampleResource.setType('products');
    exampleResource.setAttribute('title', 'Example product...');

    // Set document data
    exampleDocument.setData(exampleResource);

    // Test
    alert(exampleDocument.toJson());
  }
}
</script>

$http

This helper helps you to consume API easier.

<!-- Your component -->
<template>
  <div></div>
</template>

<script>
export default {

  async created() {

    // Get some products from api
    let productsDocument = await this.$http.collection('products');

    // Create a product
    // Build a product document
    let productDocument = new this.$JsonApi;
    let productResource = productDocument.makeResource();
    productResource.setType('products');
    productResource.setAttributes({
      title: 'Example product',
      price: 9.99  
    });
    productDocument.setData(productResource);

    // Send request
    let productResponseDocument = await this.$http.create(productDocument);
  }
}
</script>

$linkTo

This helper helps you to navigate between pages easier.

<!-- Your component -->
<template>
  <div>

    <!-- Link to home page -->
    <router-link :to="$linkTo('home')">Home</router-link>

    <!-- Link to list products page -->
    <router-link :to="$linkTo('products')">All products</router-link>

    <!-- Link to a product -->
    <router-link :to="$linkTo('product', productResourceObject)">
      {{ productResourceObject.getAttribute('title') }}
    </router-link>

    <!-- Link to a post -->
    <router-link :to="$linkTo('post', postResourceObject)">
      {{ postResourceObject.getAttribute('title') }}
    </router-link>

  </div>
</template>

Below is a table of possible parameters:

Page	First parameter	Second parameter
Home	'home'	void
List pages	'pages'	void
Page detail	'page'	pageResourceObject
List posts	'posts'	void
Post detail	'post'	postResourceObject
List products	'products'	void
Product detail	'product'	productResourceObject
List product collections	'collections'	void
Product collection detail	'collection'	void
Cart	'cart'	void
Checkout	'checkout'	cartResourceObject
Invoice	'invoice'	invoiceResourceObject
Thank you (payment successful)	'thankyou'	invoiceResourceObject
Payment failure	'payment-failure'	invoiceResourceObject

$cookie

Example:

<!-- Your component -->
<template>
  <div>{{ $cookie.get('cookie-name') }}</div>
</template>

<script>
export default {

  created() {

    // Create a cookie
    this.$cookie.set('name', value);

    // Create a cookie that expires 7 days from now
    this.$cookie.set('name', value, { expires: 7 });

    // Read cookie
    console.log(this.$cookie.get('name'));

    // Read all cookies
    console.log(this.$cookie.get()); // { key: value, key: value,... }
  }
}
</script>

$currency

<!-- Your component -->
<template>
  <div>
    {{ $currency.priceFormat(19.99) }} <!-- Result: $19.99 -->
  </div>
</template>

$image

<!-- Your component -->
<template>
  <div>

    <!-- Get image url -->
    {{ $image.url(imageResourceObject) }}

    <!-- Resize an image $image.resize(imageResourceObject, width, isCropped) -->
    {{ $image.resize(imageResourceObject, 300, true) }} -> Resize image to 300px width, cropped
    {{ $image.resize(imageResourceObject, 300) }} -> Resize image to 300px of width, not cropped

  </div>
</template>

$handleException

This helper helps you to handle http exception easier.

<!-- Your component -->
<template>
  <div></div>
</template>

<script>
export default {

  async created() {

    try {

      // Get some products from api
      let productsDocument = await this.$http.collection('products');

    } catch (e) {
      let errors = this.$handleException(e); // ['error message 1', 'error message 2', ...]
    }  

  }
}
</script>