Getting Started

Getting Started

This page shows how to add Selldone Components to a Vue 3 app, register the plugin, and render your first components. For a project where everything is already wired up, start from the Storefront instead.

Prerequisites

• Vue 3 with a bundler that compiles .vue, TypeScript and SCSS (for example Vite with sass). The package ships source files ("main": "index.ts").
• Vuetify 3, vue-i18n, Vue Router and Vuex. These are dependencies of the package and are used by many components.
• Font Awesome (@fortawesome/fontawesome-free) if you load the Font Awesome icon CSS, as the Storefront does.
• A Selldone shop and the SDK that matches your app: Storefront SDK for customer-facing apps, Backoffice SDK for admin tools.

1. Install

npm install @selldone/components-vue

yarn add @selldone/components-vue

2. Register the plugin

import { createApp } from "vue";
import { createComponents } from "@selldone/components-vue/components";
import { VuetifyInstance } from "@selldone/components-vue/plugins/vuetify/vuetify";
import { StorefrontSDK } from "@selldone/sdk-storefront";

// Icon fonts
import "@fortawesome/fontawesome-free/css/all.css";
import "@selldone/components-vue/style/fonts/material-design-fonts/material-design-icons.scss";

import App from "./App.vue";
import { i18n } from "./lang/i18n"; // your vue-i18n instance
import router from "./router";
import store from "./store";

const app = createApp(App);

const components = createComponents({});
app.use(components);

StorefrontSDK.Setup(); // creates window.$storefront and window.XAPI

app.use(i18n);
app.use(router);
app.use(store);
app.use(VuetifyInstance(i18n));

app.mount("#app");

Importing @selldone/components-vue/components also runs SelldoneCore.Setup() from Core and loads the library stylesheet.

3. Provide the shop

Many storefront components inject $shop. Provide it from your root component, as the Storefront does in StorefrontApp.vue:

import { computed } from "vue";

export default {
  data: () => ({ shop: null }), // load it with window.$storefront
  provide() {
    return {
      $shop: computed(() => this.shop),
    };
  },
};

4. Render components

<template>
  <div v-if="product">
    <s-shop-product-card :product="product" />
    <u-price :amount="product.price" :currency="product.currency" large />
    <span v-copy>{{ product.title }}</span>
  </div>
</template>

<script lang="ts">
import SShopProductCard from "@selldone/components-vue/storefront/product/card/SShopProductCard.vue";

export default {
  components: { SShopProductCard },
  props: { product: Object },
};
</script>

u-price and the v-copy directive are global, registered by createComponents(). Other components are imported by path.

Next steps

• Installation and Registration — everything the plugin installs.
• Component Families — find the component you need.
• Storefront vs Backoffice — SDKs and globals per family.
• Storefront: Start & Build Storefront