Vue.js SDK

This guide will get you all set up with our Vue.js SDK, ready to integrate pricing, payments, authentication and more into your storefront.

The Moonbase Vue.js SDK comes with a set of composables to let you easily access products & pricing, cart and authentication, customer inventory and more. It is made using TypeScript, so you will have typed models everywhere, but you can just as easily use it in your JavaScript projects.

If you want to see an example of this library in use, check out our Nuxt sample storefront:

Getting started

Start by adding the package to your project:

npm install @moonbase.sh/vue --save

Then add it to your Vue.js app by passing the proper configuration:

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

const storefront = createStorefront('https://{YOUR-ACCOUNT-ID}.moonbase.sh')

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

Nuxt SSR support

The Moonbase Vue.js SDK is made to also support server side rendering. To avoid state leakage and support state hydration in Nuxt, you need to replace the state factory when instantiating the storefront. The appropriate place to configure this is through a Nuxt plugin:

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

export default defineNuxtPlugin(async (nuxtApp) => {
    const storefront = createStorefront(
        'https://demo.moonbase.sh',
        (key, state) => useState(key, () => state))

    // Necessary to load the relevant context server-side
    // eslint-disable-next-line node/prefer-global/process
    if (process.server)
        await storefront.updateStorefront()

    nuxtApp.vueApp.use(storefront)
})

Composables

All composables use the same core storefront context that you set up using the above instructions.

useAuth

The useAuth composable contains functions to handle user authentication, as well as a computed property of the currently logged-in user and whether the user has been loaded yet.

import { useAuth } from '@moonbase.sh/vue'

const {
    user,
    loaded,
    signIn,
    signUp,
    signOut,        // 🔒 Needs authenticated user
    update,         // 🔒 Needs authenticated user
    setPassword,    // 🔒 Needs authenticated user
    forgotPassword,
    resetPassword,
    confirmAccount, // ! Returns password reset token to set initial password
    confirmEmail,
    confirmEmailChange, // 🔒 Needs authenticated user
} = useAuth()

The SDK will try to load the user on page load, if a valid user access token is found in localStorage. Refreshing the access token is also handled by the SDK, so you don't need to worry about refreshing tokens yourself.

useInventory

The useInventory composable exposes a number of endpoints to fetch customer inventory, or in other words; what products and licenses the authenticated customer owns. To be able to build a fully self-service licensing experience, the composable also allows fetching activations for licenses, as well as revoke them on demand.

If you are using offline activations, that can also be handled using the activateProduct endpoint, which takes in a device token and returns a license token usable for offline activations. To learn more about offline activations, check out our documentation on activation flows.

import { useInventory } from '@moonbase.sh/vue'

const {
    getLicenses,
    getLicenseActivations,
    getProducts,
    getProductLicenses,
    getProductActivations,
    revokeActivation,
    activateProduct,
    downloadProduct,
} = useInventory()

When setting up products in Moonbase, you have the ability to control who can download releases of your products, either opening it up for everyone, requiring authenticated users, or even requiring downloaders to own the software. In the case you pick anything but the first option, it's important that you use the downloadProduct method to fetch and open authenticated download links in order to avoid authentication errors for users of your storefront. On the other hand, if you don't have any authorization policy in place, you can simply redirect users to the path of the product downloads as necessary.

useBundle

The useBundle composable returns a computed ref of a specific bundle specified by the bundle ID given.

import { useBundle } from '@moonbase.sh/vue'

const bundle = useBundle('demo-bundle')

The bundle will be null if it's not found in your publicly available bundles, or if the storefront data has not yet been loaded.

useBundles

The useBundles composable returns a computed ref of all currently loaded and available bundles.

import { useBundles } from '@moonbase.sh/vue'

const bundles = useBundles()

The bundle list will be empty if the storefront data has not yet been loaded.

useProduct

The useProduct composable returns a computed ref of a specific product specified by the product ID given.

import { useProduct } from '@moonbase.sh/vue'

const product = useProduct('demo-product')

The product will be null if it's not found in your publicly available products, or if the storefront data has not yet been loaded.

useProducts

The useProducts composable returns a computed ref of all currently loaded and available products.

import { useProducts } from '@moonbase.sh/vue'

const products = useProducts()

The product list will be empty if the storefront data has not yet been loaded.

useCart

The useCart composable contains functions to handle cart manipulation, as well as a computed property of the current contents and value of the cart. To avoid delays in rendering, the total of the cart contents is calculated client-side based on products added to the cart.

import { useCart } from '@moonbase.sh/vue'

const {
    items,
    currency,
    total,
    addToCart,
    setQuantity,
    removeFromCart,
    checkout,
} = useCart()

The SDK takes care of storing the cart session in browser storage so that customers can resume shopping when coming back to the store. Also handled by the SDK is shopping in multiple tabs simultaneously, where the cart will be kept synchronized across the tabs.

When calling checkout(), the user is redirected to a hosted Moonbase checkout page, after which they are redirected back to the configured URL.

useVoucher

The useVoucher composable contains functions to handle voucher redemption. Vouchers are redeemable codes that grant licenses to products on redemption. Since these are redemeed to a customer, redeeming a voucher will require an authenticated user. See the useAuth composable for how to authenticate customers.

import { useVoucher } from '@moonbase.sh/vue'

const {
    peek,
    redeem, // 🔒 Needs authenticated user
} = useVoucher()

The returned payload from these methods contain details on which products and bundles have been redeemed by the voucher.