Overview

@avvyr/storefront-nuxt is a Nuxt layer built on top of @avvyr/storefront-sdk. Add it to your project and you get:

• Composables — useCart, useAuth, useProducts, useCheckout, and more. Each one wraps the SDK in useState for SSR-safe reactive state.
• Auto-restored cart — a plugin restores the cart from cookie on every page load.
• auth route middleware — protect pages with a single definePageMeta call.
• Server proxy — keeps the private key off the browser.
• App config schema — typed storefront key with market config, cookie names, variant display settings.
• Full B2B support — customer registration, login (magic link + password), order history, and account management are all included. useAuth() handles the full session lifecycle; useOrders() gives customers access to their order history with no extra setup.

Installation

npm install @avvyr/storefront-nuxt @avvyr/storefront-sdk

In nuxt.config.ts:

export default defineNuxtConfig({
  extends: ['@avvyr/storefront-nuxt'],
})

Configure

Create or update your app.config.ts:

export default defineAppConfig({
  storefront: {
    store: {
      strategy: 'path',  // 'path' | 'domain'
      default: 'se',     // default market id
      markets: [
        {
          id: 'se',
          marketId: '676140c4136218caaf97d79e',
          name: 'Sverige',
          locale: 'sv-SE',
          i18n: 'sv',
          currency: 'SEK',
        },
        {
          id: 'no',
          marketId: '676140c4136218caaf97d780',
          name: 'Norge',
          locale: 'nb-NO',
          i18n: 'nb',
          currency: 'NOK',
        },
      ],
    },
    // Cookie names — change if they clash with your existing cookies
    cartCookie: 'avvyr_cart',
    authCookie: 'avvyr_auth',
  },
})

Set keys in .env:

NUXT_PUBLIC_STOREFRONT_BASE_URL=https://api.avvyr.com
NUXT_PUBLIC_STOREFRONT_PUBLIC_KEY=sfp_your_public_key
NUXT_STOREFRONT_PRIVATE_KEY=sfs_your_private_key

Market strategies

path (default)

Markets are resolved from the URL prefix: /se/products, /no/products. The default market gets no prefix.

domain

Markets are resolved from the hostname. Configure domain (and optionally stagingDomain / devDomain) on each market entry.

What's auto-imported

All composables are auto-imported by Nuxt — no explicit imports needed in your .vue files:

<script setup>
// No import needed
const { cart, addItem } = useCart()
</script>