Configuration

1. Import Styles

Make sure to import the CSS styles in your main entry file:

• (e.g., main.css)

@import 'dolphin-components/dolphin-components.css';

• (e.g., main.ts)

import 'dolphin-components/dolphin-components.css';

2. Register Components (Global)

You can globally register all components in your Vue app:

import { createApp } from 'vue';
import App from './App.vue';
import { ContentLayout, DateRange, DateSelector, Icons, Modal, Switch, Tabulator, Toggle, Towser, Loader } from "dolphin-components";

const app = createApp(App);

app.component('ContentLayout', ContentLayout);
app.component('DateRange', DateRange);
app.component('DateSelector', DateSelector);
app.component('Icons', Icons);
app.component('Modal', Modal);
app.component('Switch', Switch);
app.component('Tabulator', Tabulator);
app.component('Toggle', Toggle);
app.component('Towser', Towser);
app.component('Loader', Loader);

app.mount('#app');

3. Register Directives (Global)

You can globally register all directives in your Vue app:

import { createApp } from 'vue';
import App from './App.vue';
import { InputError, ScrollbarScroll, InputSelect, InputCurrency, ScrollbarAnimateDropdown, Tooltip } from "dolphin-components";

const app = createApp(App);

app.directive("input-error", InputError);
app.directive("input-currency", InputCurrency);
app.directive("input-select", InputSelect);
app.directive("hide-scrollbar", ScrollbarScroll);
app.directive("animate-dropdown", ScrollbarAnimateDropdown);
app.directive("tooltip", Tooltip);

app.mount('#app');

4. Register Plugins (Global)

You can globally register plugins in your Vue app:

import { createApp } from 'vue';
import App from './App.vue';
import { FocusNext } from "dolphin-components";

const app = createApp(App);

app.use(FocusNext);

app.mount('#app');