Basic Usage

This guide will walk you through the basics on how to use Nitrogen.

App Modules

Nitrogen features two custom modules for Shopify and Klaviyo, located in the /modules folder. The Shopify module, in particular, lets you connect to both the Storefront API and Admin API at the same time, which is ideal for building complex storefronts that may use Shopify to act a database in some way (think wishlist functionality or unique customer account features).

Read over the official Nuxt Author Module Guide to learn more about how to create and manage your own modules.

API Integration

A minimal GraphQL client is provided to seamlessly integrate with both the Shopify Storefront and Admin APIs. It uses two server-side proxies to handle API authentication and requests, while offering a typed interface for executing GraphQL operations.

GraphQL Operations

This project includes pre-built GraphQL operations for common queries and mutations frequently used in headless storefront environments. Feel free to add or remove operations that fit your project needs.

Composable

To get GraphQL operations, use the useShopify composable:

const shopify = useShopify()

Operations can be referenced using this composable with dot notation:

// Shopify
const shopify = useShopify()

// With dot notation
await shopify.cart.addLines(cart.id, [ ... ])
await shopify.product.get({ handle: 'example-product' })

With useAsyncData

Perfect for reactive data fetching in pages or components:

// Shopify
const shopify = useShopify()

// Fetch Shopify data
const productVars = computed<ProductQueryVariables>(() => ({
  handle: handle.value,
  country: shopStore.buyerCountryCode,
  language: shopStore.buyerLanguageCode,
}))

const { data: productData } = await useAsyncData(
  `product-${handle.value}`,
  () => shopify.product.get(productVars.value),
  { watch: [productVars] },
)

// Response data
const product = computed(() => productData.value)

With Pinia

Ideal for working with actions in your Pinia stores:

// Shopify
const shopify = useShopify()

// Cart store actions
actions: {
  async createCart(input?: CartInput, optionalParams?: CartOptionalInput) {
    try {
      const response = await shopify.cart.create({
        input: input,
        ...optionalParams,
      })

      if (response?.userErrors?.length) {
        throw new Error(response?.userErrors[0]?.message)
      }

      this.cart = response?.cart
    } catch (error: any) {
      console.error('Cannot create cart:', error.message)
      throw error
    }
  },
  // More cart actions...
}