Nuxt Shopify

Plug & play Shopify integration for Nuxt 3 & 4

Get started Star on GitHub

Minimal API for your Storefront

ProductImage.vue

app/components/ProductImage.vue

<script setup lang="ts">
const props = defineProps<{
  handle: string
}>()

const { data } = await useStorefrontData('product', `#graphql
  query GetProduct($handle: String!) {
    product(handle: $handle) {
      featuredImage {
        url
      }
    }
  }
`, {
  variables: props,
})
</script>

<template>
  <NuxtImg :src="data?.product?.featuredImage?.url" />
</template>

Easy integration with the Admin API

United States

Germany

Austria

Spain

Markets.vue

server/api/admin/markets.ts

export default defineEventHandler(async () => {
  const admin = useAdmin()

  const { data } = await admin.request(`#graphql
    query GetMarkets {
      markets(first: 4) {
        nodes {
          ...MarketFields
        }
      }
    }
    ${MARKET_FRAGMENT}
  `)

  return flattenConnection(data?.markets)
})

Build your Shopify store with Nuxt

Module for Nuxt 3 & 4

Optimized for the most famous Vue framework. Nuxt Shopify gives you everything you need to build fast, performant, and SEO-friendly shops.

Full Storefront API Support

Access products, collections, customers, and more with the Shopify Storefront API. Perfect for building custom shopping experiences.

Secure Admin API Access

Manage orders, inventory, and other store data securely with the Shopify Admin API. Ideal for building custom admin dashboards and tools.

Zero-config Code Generation

Generates and hot-reloads TypeScript types from your GraphQL operations, for reliable typing and autocompletion.

Robust Error Handling

Use built-in error handling utilities to manage and respond to API errors gracefully. Third-party logging-compatible.

Extendable Lifecycle Hooks

Customize and extend the module's behavior with lifecycle hooks. Add custom logic at various stages of API interaction.