Installation and Registration

Installation and Registration

createComponents() turns the library into a Vue plugin. This page lists exactly what it installs, what runs when you import it, and how to add your own components and directives in the same step. The source is in components.ts, components-mandetory.ts and directives-mandetory.ts.

Entry points

Import	What you get
@selldone/components-vue/components	createComponents(options)
@selldone/components-vue	createComponents (re-exported by index.ts)
@selldone/components-vue/<folder>/.../<Component>.vue	Any single component, imported by path
@selldone/components-vue/plugins/vuetify/vuetify	VuetifyInstance(i18n)
@selldone/components-vue/plugins/notification/NotificationService.ts	NotificationService
@selldone/components-vue/utils/events/EventBus.ts	EventBus, EventName
@selldone/components-vue/mixin/...	Shared mixins (for example TemplateMixin, DateMixin, CurrencyMixin)

Side effects of importing components.ts

Importing the entry file:

• imports the console style helper from Core and the library stylesheet style/components.scss,
• calls SelldoneCore.Setup() from @selldone/core-js,
• sets window.$language to English (Language.en) as the initial language object,
• prints the Selldone banner in the browser console.

What app.use(createComponents({})) installs

Global mixin

CoreMixin is added to every component. It provides helpers such as USER(), USER_ID(), getShopImagePath(), getProductImage(), getUserAvatar(), getCountryName(), copyToClipboard(), getCurrentLanguage() and setCurrentLanguage().

Global components and plugins

Name	Source
UCheck	ui/check/UCheck.vue
u-price	ui/price/UPrice.vue
ULoadingProgress	ui/loading/progress/ULoadingProgress.vue
apexchart	vue3-apexcharts (loaded asynchronously)
u-qrcode	ui/qrcode/UQrcode.vue (async)
u-barcode	ui/barcode/UBarcode.vue (async)
u-lottie	ui/lottie/ULottie.vue (async)
UButtonCircle, UTooltipTips, SWidget, UWidgetHeader	ui/button, ui/tooltip, ui/widget
Plugins	@kyvg/vue3-notification, vue-numerals, vue-the-mask, vue-flag-icon, confetti

Global directives

Directive	Purpose
v-copy	Copy the element text (or the bound value) to the clipboard on click.
v-track	Track clicks, for example v-track:click="'Home ● Open product'".
v-dynamic-scripts	Load <script> tags found inside the element.
v-dragscroll	Scroll an element by dragging with the mouse.
v-size	Call a function with { width, height } when the element is resized.

Details and examples are in Directives and Services.

Global properties

Property	Value
$SEO	SEO helper from Core
GlobalRules	Form validation rules from Core
IMAGE_SIZE_SMALL	From BackofficeLocalStorages.IMAGE_SIZE_SMALL
IMAGE_SIZE_BLOG	256
SUB_TOOLBAR_CONFIG	Default toolbar props used by back-office pages
window	The browser window, usable in templates

Register your own components and directives

createComponents accepts components and directives maps and registers them after the built-in ones:

import { createComponents } from "@selldone/components-vue/components";
import MyBanner from "./components/MyBanner.vue";
import FocusDirective from "./directives/FocusDirective";

app.use(
  createComponents({
    components: { MyBanner },          // <MyBanner /> everywhere
    directives: { focus: FocusDirective }, // v-focus everywhere
  }),
);

Global objects your app should set

Some components read globals that the host app defines. The Storefront sets them in storefront.ts:

Global	Used for
window.$storefront, window.XAPI	Storefront API (set by StorefrontSDK.Setup())
window.$backoffice, window.API	Dashboard API (set by BackofficeSDK.Setup())
window.$global_router, window.$global_store	Router and store, used outside components
window.$global_vuetify, window.$i18n_global	Vuetify and i18n, used by dynamic components and the Page Builder styler

Next steps

• Component Families
• Storefront vs Backoffice
• Theming and Styles
• FAQ