@dynect/sdk

Dynect shared UI component library for Nuxt. A Nuxt module that registers a comprehensive set of Vue components globally into your Nuxt application.

Installation

npm install @dynect/sdk
# or
pnpm add @dynect/sdk

Setup

Add the module to your nuxt.config.ts:

export default defineNuxtConfig({
	modules: ["@dynect/sdk"],
});

Configuration

You can optionally configure which component groups to load and whether they are registered globally:

export default defineNuxtConfig({
	modules: ["@dynect/sdk"],
	dynectSdk: {
		// Component groups to load. Defaults to all groups.
		dirs: ["dynect", "ui", "base", "chart"],
		// Register components globally. Default: true
		global: true,
	},
});

Options

| Option | Type | Default | Description | | -------- | --------------------- | ------------------------------------ | ----------------------------------------- | | dirs | string[] | ['dynect','ui','base','chart'] | Component groups to register | | global | boolean | true | Register components globally in templates | | i18n | object \| false | {} | i18n options — see section below |

Internationalisation (i18n)

@dynect/sdk automatically installs and configures @nuxtjs/i18n — you do not need to add it to your modules or install it separately.

Built-in locales

| Code | Language | File | | ---- | -------------- | --------- | | en | English | en.json | | ms | Bahasa Melayu | ms.json |

Default configuration

// applied automatically — no action needed
{
  locales: [
    { code: 'en', iso: 'en_US', file: 'en.json', name: 'English' },
    { code: 'ms', iso: 'ms_MY', file: 'ms.json', name: 'Bahasa' },
  ],
  defaultLocale: 'en',
  strategy: 'no_prefix',
  detectBrowserLanguage: {
    useCookie: true,
    cookieKey: 'dynect_language',
    cookieSecure: true,
    redirectOn: 'root',
    alwaysRedirect: true,
  },
}

Override default locale or cookie key

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@dynect/sdk'],
  dynectSdk: {
    i18n: {
      defaultLocale: 'ms',
      cookieKey: 'my_app_lang',
    },
  },
})

Disable built-in i18n

If you want to manage i18n yourself, pass i18n: false:

export default defineNuxtConfig({
  modules: ['@dynect/sdk', '@nuxtjs/i18n'],
  dynectSdk: {
    i18n: false,
  },
  i18n: {
    // your own config
  },
})

Extend translations with your own keys

The SDK's translations are a base layer. Add your own keys by creating locale files in your app and configuring @nuxtjs/i18n to merge them.

1. Create your own locale files

app/
  assets/
    lang/
      en.json   ← your extra keys
      ms.json

// app/assets/lang/en.json
{
  "dashboard": {
    "title": "Dashboard",
    "welcome": "Welcome back, {name}"
  }
}

2. Extend the i18n config in nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@dynect/sdk'],
  dynectSdk: {
    i18n: { defaultLocale: 'en' },
  },
  i18n: {
    locales: [
      { code: 'en', iso: 'en_US', file: 'en.json', name: 'English' },
      { code: 'ms', iso: 'ms_MY', file: 'ms.json', name: 'Bahasa' },
    ],
    langDir: './app/assets/lang',
    mergeLocales: true,
  },
})

mergeLocales: true tells @nuxtjs/i18n to deep-merge your app's translations on top of the SDK's built-in ones, so existing SDK keys remain available.

Add a new language

1. Add a locale file in your app's lang directory:

// app/assets/lang/zh.json
{
  "learn_more": "了解更多",
  "login": {
    "welcome": "欢迎。",
    "submit": "登录"
  }
}

2. Extend the locales list:

export default defineNuxtConfig({
  modules: ['@dynect/sdk'],
  i18n: {
    locales: [
      { code: 'en', iso: 'en_US', file: 'en.json', name: 'English' },
      { code: 'ms', iso: 'ms_MY', file: 'ms.json', name: 'Bahasa' },
      { code: 'zh', iso: 'zh_CN', file: 'zh.json', name: '中文' },
    ],
    langDir: './app/assets/lang',
    mergeLocales: true,
  },
})

Using translations in components

<script setup>
const { t, locale, setLocale } = useI18n()
</script>

<template>
  <p>{{ t('login.welcome') }}</p>
  <button @click="setLocale('ms')">Bahasa</button>
  <button @click="setLocale('en')">English</button>
</template>

Built-in translation keys reference

learn_more
login.welcome
login.email_label
login.email_placeholder
login.password_label
login.password_placeholder
login.remember_me
login.forgot_password
login.submit
login.no_account
login.sign_up
login.or
login.sso
login.copyright

Component Groups

dynect — High-level components (prefix: Dynect)

| Component | Usage | | ----------------------- | ------------------------------------ | | DynectAccordion | Collapsible content sections | | DynectAlert | Contextual feedback messages | | DynectAutocomplete | Input with suggestions | | DynectAvatar | User avatar display | | DynectAvatarGroup | Stacked group of avatars | | DynectAvatarLabel | Avatar with label | | DynectBadge | Status/count indicators | | DynectButton | Action button | | DynectCheckbox | Checkbox input | | DynectDatePicker | Single date picker | | DynectDateRange | Date range picker | | DynectDropzone | File drag-and-drop upload | | DynectEventCalendar | Full event calendar | | DynectFilters | Filter bar component | | DynectFormField | Form field wrapper | | DynectFormLabel | Form field label | | DynectFormDescription | Form field description | | DynectFormError | Form validation error | | DynectGantt | Gantt chart | | DynectInput | Text input | | DynectKanban | Kanban board | | DynectModal | Dialog/modal | | DynectOtpInput | One-time password input | | DynectPagination | Data pagination | | DynectPermissionGuard | Permission-based rendering | | DynectProgress | Progress bar | | DynectRadio | Radio button input | | DynectSelect | Single select dropdown | | DynectSelectMultiple | Multi-select dropdown | | DynectSheet | Slide-over panel | | DynectSignature | Signature pad | | DynectSwitchColor | Color theme toggle | | DynectSwitchLanguage | Language switcher | | DynectTable | Data table with sorting & pagination | | DynectTagsInput | Tags/chip input | | DynectTelephone | Phone number input | | DynectTextarea | Multiline text input | | DynectTextEditor | Rich text editor (TipTap) | | DynectTimeline | Timeline display | | DynectTimePicker | Time picker input | | DynectToggle | Toggle switch |

ui — Primitive UI components (no prefix)

Headless, accessible primitives built on Reka UI. Includes accordion, alert, avatar, badge, button, calendar, card, carousel, checkbox, command, dialog, drawer, dropdown, form, input, pagination, popover, select, sheet, table, tabs, textarea, toast, tooltip, and more.

base — Base/specialized components (prefix: Base)

| Component | Description | | ------------------- | ------------------- | | BaseEventCalendar | Event calendar core | | BaseOrgChart | Organization chart | | BaseSignature | Signature canvas | | BaseToast | Toast notification |

chart — Chart components (prefix: Chart)

Built on ECharts via vue-echarts.

| Component | Description | | ------------ | ----------- | | ChartBar | Bar chart | | ChartLine | Line chart | | ChartPie | Pie chart | | ChartRadar | Radar chart |

app — App layout components (prefix: App)

| Component | Description | | --------------- | ------------------ | | AppHeader | Application header | | AppLogo | Logo display | | AppPageHeader | Page-level header | | AppSidebar | Navigation sidebar |

Development

Prerequisites

• Node.js 18+
• pnpm

Setup

pnpm install

Build

pnpm build

Watch mode (stub build for local development)

pnpm dev

Sync components from source

Components are synced from the dynect-base-web sibling project. Run:

pnpm sync

This copies the latest components, utils, and locale files from ../dynect-base-web/app/ into src/runtime/:

| Source | Destination | | ------------------------------- | ---------------------------------- | | app/components/dynect/ | src/runtime/components/dynect/ | | app/components/ui/ | src/runtime/components/ui/ | | app/components/base/ | src/runtime/components/base/ | | app/components/chart/ | src/runtime/components/chart/ | | app/lib/utils.ts | src/runtime/utils/index.ts | | app/assets/lang/en.json | src/runtime/locales/en.json | | app/assets/lang/ms.json | src/runtime/locales/ms.json |

Publishing

pnpm build
npm publish --access public

Releasing a new version

| Command | Version bump | Example | | -------------------- | ---------------- | ----------------- | | pnpm release:patch | Bug fixes | 1.0.0 → 1.0.1 | | pnpm release:minor | New features | 1.0.0 → 1.1.0 | | pnpm release:major | Breaking changes | 1.0.0 → 2.0.0 |

Each command bumps the version in package.json, builds the package, then publishes to npm.

License

MIT