@moonbase.sh/vue

Vue 3 storefront SDK built on top of @moonbase.sh/storefront-api.

It provides a plugin/context plus composables for auth, products, cart, checkout, vouchers, inventory, and activation flows.

Learn more in our official docs: https://moonbase.sh/docs/storefronts/sdks/vue/

Install

pnpm add @moonbase.sh/vue

Peer dependency:

• vue@^3.2.0

Basic setup (Vue + Vite)

import { createStorefront } from '@moonbase.sh/vue'
import { createApp } from 'vue'
import App from './App.vue'

const storefront = createStorefront('https://demo.moonbase.sh')

createApp(App)
  .use(storefront)
  .mount('#app')

Use composables in components

<script setup lang="ts">
import { useAuth, useCart, useProducts } from '@moonbase.sh/vue'

const products = useProducts()
const { user, signIn, signOut } = useAuth()
const cart = useCart()

async function buyFirstProduct() {
  const first = products.value[0]
  if (!first)
    return

  cart.addToCart(first)
  await cart.checkout({ redirect: false })
}
</script>

Main composables

• useAuth() - sign in/up/out, profile updates, password/email/account confirmation flows.
• useProducts(), useProduct(id) - storefront products access.
• useBundles(), useBundle(id) - storefront bundles access.
• useCart() - cart state, totals, add/remove/set quantity, checkout.
• useCheckout(items, options) - one-off checkout session without mutating the persistent cart.
• useInventory() - owned products/licenses/subscriptions, activation and download helpers.
• useVoucher() - voucher peek/redeem.
• useActivationRequest(token) - activation request polling + fulfillment helpers.
• useVendor() - vendor metadata.

Nuxt/state management integration

You can pass a custom stateFactory to integrate with Nuxt useState:

const storefront = createStorefront(
  'https://demo.moonbase.sh',
  (key, state) => useState(key, () => state),
)

if (process.server)
  await storefront.updateStorefront()

Checkout lifecycle events

The storefront context exposes checkout lifecycle hooks:

storefront.onCheckoutInitiated((order, total) => {
  console.log('Checkout started', order.id, total)
})

storefront.onCheckoutCompleted((order) => {
  console.log('Checkout completed', order.id)
})