Overview @empathyco/x-archetype-utils provides utility functions and helpers specifically designed for building applications with the X Archetype . It includes internationalization helpers, configuration utilities, and composables that simplify common archetype patterns.This package is primarily intended for use with X Archetype projects. If you’re building a custom Interface X integration, you may not need this package.
Installation npm install @empathyco/x-archetype-utils
Main Exports Internationalization (i18n) Vue i18n integration utilities for multilingual search experiences:
import { createI18n , loadMessages } from '@empathyco/x-archetype-utils' ; // Create i18n instance const i18n = createI18n ({ locale: 'en' , fallbackLocale: 'en' }); // Load translation messages await loadMessages ( i18n , [ 'en' , 'es' , 'fr' ]);
Configuration Utilities Helpers for managing archetype configuration:
import { mergeConfig , validateConfig , getConfigValue } from '@empathyco/x-archetype-utils' ; // Merge user config with defaults const config = mergeConfig ( defaultConfig , userConfig ); // Validate configuration structure const isValid = validateConfig ( config ); // Get nested config value safely const value = getConfigValue ( config , 'search.debounce' , 300 );
Vue Composables Reusable composition functions for Vue 3:
import { useDevice , useBreakpoint , useLocalStorage } from '@empathyco/x-archetype-utils' ; // Detect device type const { isMobile , isTablet , isDesktop } = useDevice (); // Responsive breakpoints const { isXs , isSm , isMd , isLg , isXl } = useBreakpoint (); // Persistent local storage const [ value , setValue ] = useLocalStorage ( 'key' , defaultValue );
Peer Dependencies Vue i18n for internationalization
Usage with X Archetype This package is designed to work seamlessly with X Archetype:
import { createApp } from 'vue' ; import { XInstaller } from '@empathyco/x-components' ; import { createI18n , loadMessages , mergeConfig } from '@empathyco/x-archetype-utils' ; import App from './App.vue' ; import archetypeConfig from './config' ; // Setup i18n const i18n = createI18n ({ locale: 'en' , fallbackLocale: 'en' }); await loadMessages ( i18n , [ 'en' , 'es' ]); // Merge with default configuration const config = mergeConfig ( defaultConfig , archetypeConfig ); // Create Vue app const app = createApp ( App ); app . use ( i18n ); // Install X Components const installer = new XInstaller ({ adapter: config . adapter , domElement: '#app' , xModules: config . xModules }); installer . init (); app . mount ( '#app' );
TypeScript Support Fully typed with TypeScript definitions:
import type { ArchetypeConfig , I18nConfig , DeviceInfo , Breakpoint } from '@empathyco/x-archetype-utils' ; const config : ArchetypeConfig = { // Configuration with full type support };
Dependencies
@empathyco/x-deep-merge - Deep object merging@empathyco/x-utils - Shared utilitiesvue-i18n - Vue internationalization
X Archetype Complete archetype project
x-components Core component library
x-utils General utility functions
Installation Getting started guide
