Configuration

Projects can override non-Boolean component prop defaults once at application startup. Explicit props always take precedence over project configuration, and projects that do not install the plugin continue to use the package defaults.

explicit prop -> project configuration -> package default

Create the configuration file

Create rvc.config.ts in the consuming project's root. JavaScript projects can use rvc.config.js. defineRvcConfig provides type checking and autocomplete while allowing every component section and property to remain optional.

import { defineRvcConfig } from '@robuust-digital/vue-components/rvc-config';

export default defineRvcConfig({
  buttonBase: {
    color: 'secondary',
    size: 'sm',
  },
  dataTable: {
    noResultsText: 'Nothing found.',
    perPage: 25,
    perPageOptions: [10, 25, 50],
  },
});

Install the configuration

Pass the configuration to the plugin through app.use:

import { createApp } from 'vue';
import Rvc from '@robuust-digital/vue-components/rvc-config';
import App from './App.vue';
import rvcConfig from '../rvc.config';

createApp(App)
  .use(Rvc, rvcConfig)
  .mount('#app');

Adjust the import path to the consuming project's application entry point.

Runtime-dependent configuration

Pass a top-level factory to defineRvcConfig when values depend on runtime state initialized before app.use, such as the active locale:

import { defineRvcConfig } from '@robuust-digital/vue-components/rvc-config';
import i18n from './resources/js/plugins/i18n';

export default defineRvcConfig(() => ({
  dataTable: {
    fromLabel: i18n.global.t('common.pagination.from-label'),
    perPageLabel: i18n.global.t('common.pagination.per-page-label'),
  },
}));

Install the factory without calling it:

changeLocale(locale);

createApp(App)
  .use(i18n)
  .use(Rvc, rvcConfig)
  .mount('#app');

The plugin evaluates only the top-level factory, exactly once during app.use. Function-valued component settings such as Combobox value transformers remain configuration values and are not executed by the plugin.

The plugin only provides configuration. Components can continue to be imported from their existing package entry points.

Boolean props keep their component-level defaults and are not configurable through rvc-config. Pass Boolean props directly to components when needed.

<script setup lang="ts">
import { ButtonBase } from '@robuust-digital/vue-components/core';
</script>

<template>
  <!-- Uses the configured secondary color and small size. -->
  <ButtonBase label="Configured button" />

  <!-- The explicit prop overrides the project configuration. -->
  <ButtonBase
    label="Primary button"
    color="primary"
  />
</template>

Complete configurable defaults

The package exports defaultRvcConfig when a project needs to inspect or extend every configurable default. The following configuration is included by the package:

export default {
  accordion: {
    defaultOpenIndex: undefined,
    contentClass: '',
  },
  badge: {
    size: 'base',
    color: 'default',
  },
  buttonBase: {
    size: 'base',
    color: 'primary',
  },
  combobox: {
    responseData: (data: unknown) => data as unknown[],
    displayValue: (item: unknown) => (item as { name?: string })?.name || null,
    optionText: (option: unknown) => (option as { name?: string })?.name || null,
    minLength: 2,
    itemKey: 'id',
    size: 'base',
    debounce: 150,
    minLoadingTime: 0,
  },
  dataTable: {
    noResultsText: 'No results found.',
    loadingText: 'Loading content...',
    perPage: 10,
    perPageLabel: 'per page',
    perPageOptions: [10, 20, 50],
    fromLabel: 'of',
    prevIcon: null,
    nextIcon: null,
  },
  drawer: {
    submitLabel: 'Save',
    cancelLabel: 'Cancel',
    panelClass: 'rvc-drawer-panel-max-width',
  },
  dropdown: {
    label: 'Options',
  },
  emptyState: {
    icon: null,
  },
  fileUpload: {
    variant: 'area',
    size: 'base',
    label: 'Drop your files here',
    description: '',
    buttonLabel: 'Upload file',
    buttonColor: 'primary',
    icon: null,
  },
  formInput: {
    size: 'base',
  },
  formSelect: {
    size: 'base',
    optionLabel: 'name',
    optionValue: 'id',
    optionDisabled: 'disabled',
  },
  formTextarea: {
    size: 'base',
  },
  modal: {
    submitLabel: 'Confirm',
    cancelLabel: 'Cancel',
    panelClass: 'rvc-modal-panel-max-width',
  },
  pagination: {
    perPage: 10,
    perPageLabel: 'per page',
    perPageOptions: [10, 20, 50],
    fromLabel: 'of',
    prevIcon: null,
    nextIcon: null,
  },
  richTextEditor: {
    config: 'default',
  },
  tabs: {
    tabStyle: 'default',
  },
  toast: {
    timeout: 5000,
    position: 'bottom',
  },
  tooltip: {
    maxWidth: null,
    placement: undefined,
    size: 'base',
  },
};

Only include values that differ from these defaults in a project's rvc-config.ts. Each component section is merged separately, so overriding one property preserves the other package defaults for that component.