Installation

This package contains the vue components that implement the codey design system. To install the package, run the following command:

npm i @xerius/codey-components

Install the plugin

The CodeyComponents plugin must be used in order to be able to use the components. It will register the required codey-style theme files as well as the required configuration for PrimeVue components.

import { CodeyComponents } from "@xerius/codey-components";

const app = createApp(App);

app.use(CodeyComponents, {
  // Enable the Toast Service (optional)
  useToastService: true,
});

app.mount("#app");

Plugin Options

| Description | | ------------------ | ------------ | ------ | ------------------------------------------ | | useToastService | boolean | true | Enable the Toast Service for notifications | | useTooltip | boolean | false | Enable the Tooltip directive | | preset | "aura" | "aura" | Theme preset for PrimeVue components | | primeDefaultLocale | "nl" | "fr" | "nl" | Default locale for PrimeVue components |

PrimeVue Localization

PrimeVue Localization allows you to customize the language and locale settings for PrimeVue components. This includes setting the default language for components and dynamically changing the language at runtime based on user preferences.

For example, the Calendar component in PrimeVue uses locale settings such as dayNames to display the names of the days of the week. These names can be translated to the selected language, e.g., ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'].

The CodeyComponents plugin set the default locale for PrimeVue localization with the primeDefaultLocale prop. And the XerLanguageSwitch component handles PrimeVue localization based on the selected language. More information in the XerLanguageSwitch Docs.

If you need to configure this manually, we recommend using the Primelocale repo to get the locale messages for your language.

When setting the PrimeVue localization:

The default PrimeVue locatization can be set as option during the PrimeVue installation in your application.

example:

import primeLocaleNl from "primelocale/nl.json";
...
app.use(PrimeVue, {
  ...
  locale: primeLocaleNl.nl,
});

Change the PrimeVue localization based on a language set at run time use the primevue reactive locale configuration, primevue.config.locale, which is available thanks to the usePrimeVue composable.

example:

import { usePrimeVue } from "primevue/config";
import primeLocaleNl from "primelocale/nl.json";
...
const primevue = usePrimeVue();
primevue.config.locale = primeLocaleNl.nl;

See the PrimeVue documentation for more information.