@limbo-works/shopify-client

A Nuxt module for interacting with the Shopify Storefront API.

Table of contents

• Installation
• Usage
  • Composable
  • Custom Queries
• Technical Reference
  • Articles
  • Blogs
  • Cart
  • Metaobject
  • Pages
  • Products
  • Shop

Installation

Before installing the package, make sure you have the following line in your .npmrc file:

@limbo-works:registry=https://npm.pkg.github.com

Then install the package with the following command:

yarn add @limbo-works/nuxt-shopify

Then add it to your nuxt.config.js file.

export default defineNuxtConfig({
  modules: ['@limbo-works/nuxt-shopify', ... ],

  shopify: {
    shop: 'SHOP_NAME_HERE',
    token: 'SHOP_TOKEN_HERE',
    version: 'API_VERSION_HERE' // defaults to '2024-01'
  }
})

To generate a storefront token, you first need to add a headless channel to the shopify store (See documentation here). Then, in the Shopify backoffice, go to Settings -> Apps and sales channels -> Headless, click 'Open sales channel' and then click 'Add storefront'. Afterwards, you should see a view, from where you can generate a public access token.

Usage

Composable

To get access to the various tools in the module, you should use the included composable.

const shopify = useShopify();

The returned objects contains the following values.

{
  query: Function,
  shop: Object,
  products: Object,
  pages: Object,
  blogs: Object,
  articles: Object,
  metaobjects: Object,
  cart: Object
}

Custom Queries

To create custom queries, you can use the query function.
Start by creating a custom graphql query (fx. ~/assets/queries/products.graphql), see example below.
The Storefront API documentation can be seen here.

query ($first: Int, $last: Int, $after: String, $before: String) {
	products(first: $first, last: $last, after: $after, before: $before) {
		edges {
			node {
				title
			}
		}
	}
}

The query can then be imported and passed to the query function alongside optional variables.

import productsQuery from '~/assets/queries/products.graphql?raw';

const shopify = useShopify();
const result = await shopify.query(productsQuery, { first: '', after: '' });

Technical Reference

Articles

const shopify = useShopify();

const products = await shopify.articles.get({ first: 12 });
const product = await shopify.articles.getById('ID_HERE');

product.get query: ./src/graphql/products.query.graphql
product.getById query: ./src/graphql/product.query.graphql

Blogs

const shopify = useShopify();

const products = await shopify.blogs.get({ first: 12 });
const product = await shopify.blogs.getById('ID_HERE');

blogs.get query: ./src/graphql/blogs.query.graphql
blogs.getById query: ./src/graphql/blog.query.graphql

Cart

const shopify = useShopify();

const { cart } = await shopify.cart.create();
await shopify.cart.addLines(cart.id, [ ... ]);
await shopify.cart.removeLines(cart.id, [ ... ]);
await shopify.cart.updateLines(cart.id, [ ... ]);

cart.create query: ./src/graphql/cart-create.mutation.graphql
cart.addLines query: ./src/graphql/cart-lines-add.mutation.graphql
cart.removeLines query: ./src/graphql/cart-lines-remove.mutation.graphql
cart.updateLines query: ./src/graphql/cart-lines-update.mutation.graphql

Metaobject

const shopify = useShopify();

const products = await shopify.metaobjects.get({ first: 12 });
const product = await shopify.metaobjects.getById('ID_HERE');

metaobjects.get query: ./src/graphql/metaobjects.query.graphql
metaobjects.getById query: ./src/graphql/metaobject.query.graphql

Pages

const shopify = useShopify();

const products = await shopify.pages.get({ first: 12 });
const product = await shopify.pages.getById('ID_HERE');

pages.get query: ./src/graphql/pages.query.graphql
pages.getById query: ./src/graphql/page.query.graphql

Products

const shopify = useShopify();

const products = await shopify.products.get({ first: 12 });
const product = await shopify.products.getById('ID_HERE');

products.get query: ./src/graphql/products.query.graphql
products.getById query: ./src/graphql/product.query.graphql

Shop

const shopify = useShopify();

const data = await shopify.shop.get();

shop.get query: ./src/graphql/shop.query.graphql