Skip to main content

​
Overview

@empathyco/x-components is the main package of Interface X, providing a comprehensive set of Vue.js components for building powerful search and discovery experiences. It includes components, composables, directives, store modules, and utilities for creating e-commerce search interfaces.

​
Installation

npm install @empathyco/x-components vue vuex

​
Peer Dependencies

​
vue
string
required
Vue.js framework version ^3.5.28
​
vuex
string
required
Vuex state management version 4.0.2

​
Main Exports

The package exports functionality from multiple areas:

​
Components

Pre-built Vue components for search experiences including:
  • Search box components
  • Results display components
  • Facet components
  • Recommendation components
  • History and suggestion components

​
Composables

Vue 3 composition API utilities for:
  • State management
  • Event handling
  • Animation control
  • Device detection

​
Directives

Custom Vue directives for enhanced functionality:
  • Infinite scroll
  • Click outside detection
  • Element visibility tracking

​
Store Modules

Vuex store modules for managing:
  • Search state
  • Facets and filters
  • User queries
  • Recommendations
  • Tagging and analytics

​
X-Modules

Core modules exported from the package:
​
ai
module
AI-powered search features
​
device
module
Device detection and responsive behavior
​
empathize
module
Query suggestions and autocomplete
​
facets
module
Faceted search and filtering - See Module Details
​
history-queries
module
Search history management - See Module Details
​
recommendations
module
Product recommendations - See Module Details
​
search
module
Core search functionality - See Module Details
​
tagging
module
Analytics and tracking - See Module Details
​
url
module
URL synchronization - See Module Details

​
Basic Usage

import { createApp } from 'vue'
import { createStore } from 'vuex'
import { installXPlugin } from '@empathyco/x-components'
import App from './App.vue'

const app = createApp(App)

// Create Vuex store
const store = createStore({})

// Install X Components plugin
app.use(store)
app.use(installXPlugin, {
  adapter: myAdapter,
  store
})

app.mount('#app')

​
Component Example

<template>
  <div class="search-interface">
    <SearchBox />
    <Facets />
    <ResultsList />
    <Recommendations />
  </div>
</template>

<script setup lang="ts">
import {
  SearchBox,
  Facets,
  ResultsList,
  Recommendations
} from '@empathyco/x-components'
</script>

​
Configuration

Each module can be configured with specific options: 
import { XPlugin } from '@empathyco/x-components'

const xPluginOptions = {
  adapter: myAdapter,
  store,
  initialXModules: {
    search: {
      config: {
        pageSize: 24,
        pageMode: 'infinite_scroll'
      }
    },
    facets: {
      config: {
        filtersStrategyForRequest: 'all'
      }
    }
  }
}

​
TypeScript Support

The package includes full TypeScript definitions. Import types directly: 
import type {
  SearchState,
  FacetsState,
  Result,
  Facet
} from '@empathyco/x-components'

​
Key Interfaces

​
XComponent
interface
Base interface for all X Components with event handling and state access
​
XStoreModule
interface
Interface for Vuex store modules including state, getters, mutations, and actions
​
XEvent
type
Type definition for events in the X event bus system

​
Resources

Module Reference

Explore individual module documentation

GitHub Repository

View source code and examples

Build docs developers (and LLMs) love

Get started for freeTalk to us