Configuration

Configuration Object

The main configuration interface for FishtVue provides comprehensive control over component styling, theming, and behavior.

Getting FishtVue Instance

There are several ways to get the FishtVue instance:

Using Dependency Injection (Recommended)

The recommended way is to use Vue's dependency injection system:

import { FishtVueSymbol, type FishtVue } from "fishtvue/config"

// In your component setup
const fishtvue = inject<FishtVue>(FishtVueSymbol)

Using Global Window Object

Alternatively, you can access the instance through the global window object:

const fishtvue = (window as any)?.FishtVue

Configuration Properties

componentsStyle

Defines the style mode for components. Available options are:

• filled - Components with filled background
• outlined - Components with outlined borders
• underlined - Components with bottom border only

app.use(FishtVue, {
    componentsStyle: 'filled'
});

unstyled

When set to true, components will not include any built-in styles, allowing you to apply custom styling using CSS frameworks like Tailwind or Bootstrap.

app.use(FishtVue, {
    unstyled: true
});

locale

FishtVue provides comprehensive internationalization support through its locale system. You can configure default languages, add custom translations, and dynamically switch between different locales.

optionsTheme

Theme options provide fine-grained control over theme behavior, including CSS layer configuration, dark mode settings, and theme prefix customization.

componentsOptions

Global configuration object that maps component names to their default options and behavior settings. This allows you to set default properties for all components of a specific type.

app.use(FishtVue, {
    componentsOptions: {
        Button: {
            // Button specific options
        },
        Input: {
            // Input specific options
        }
        // ... other component options
    }
});

Instance Methods

The FishtVue instance provides several methods for managing configuration:

useFishtVue()

Returns a readonly copy of the FishtVue instance.

const fishtvue = useFishtVue();

getOptions()

Gets component options either for a specific component or all components.

// Get options for all components
const allOptions = fishtvue.getOptions();

// Get options for specific component
const buttonOptions = fishtvue.getOptions('Button');

getActiveLocale()

Gets the currently active locale.

const activeLocale = fishtvue.getActiveLocale();

setActiveLocale()

Sets the active locale.

fishtvue.setActiveLocale('en');

getDefaultLocale()

Gets the default locale.

const defaultLocale = fishtvue.getDefaultLocale();