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-shopifyThen 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.
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
}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: '' });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
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
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
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
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
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
const shopify = useShopify();
const data = await shopify.shop.get();shop.get query: ./src/graphql/shop.query.graphql