Installation

To start using Flux in your Vue application, you'll need to add it to your project. This section provides step-by-step instructions on how to install Flux, ensuring you can quickly integrate its components into your development workflow.

Plain installation

TIP

This is the most recommended way to use Flux. Use this form of installation if you don't need to customize the style of Flux or if you simply need to use the components without the source code.

Step 1

Open your project's root directory in your terminal and run the following command:

Bun

bun add @flux-ui/components

PNPM

pnpm install @flux-ui/components

Yarn

yarn add @flux-ui/components

NPM

npm install @flux-ui/components

Date and calendar components

Components such as the Date picker and Calendar rely on luxon. Most package managers install it automatically as a peer dependency; add it explicitly with bun add luxon if yours does not.

Step 2

Once the installation is completed, you need to add the following to your main.ts file.

main.ts

import '@flux-ui/components/style.css'

Step 3

For setting up icons, please refer to Font Awesome.

Step 4

Wrap your application in <FluxRoot> once, at the top level, and import the components you want to use:

App.vue

<template>
    <FluxRoot> 
        <FluxPane>
            <FluxSecondaryButton
                href="https://flux-ui.dev"
                label="Button"/>
        </FluxPane>
    </FluxRoot>
</template>

<script
    lang="ts"
    setup>
    import { FluxPane, FluxRoot, FluxSecondaryButton } from '@flux-ui/components'; 
</script>

FluxRoot

<FluxRoot> is the mounting point for tooltips, overlays, slide-overs, snackbars and the programmatic showAlert, showConfirm and showPrompt. Add it once around your app; without it these features silently render nothing.

Vite-preset installation

TIP

Only use this form of installation if you need more control of Flux and need the Flux source code injected into your own project.

Step 1

Open your project's root directory in your terminal and run the following command:

Bun

bun add @flux-ui/components sass-embedded @basmilius/vite-preset

PNPM

pnpm install @flux-ui/components sass-embedded @basmilius/vite-preset

Yarn

yarn add @flux-ui/components sass-embedded @basmilius/vite-preset

NPM

npm install @flux-ui/components sass-embedded @basmilius/vite-preset

Step 2

Once the installation is completed, you need to configure your Vite config file to use Flux.

TIP

For more information on the vite-preset package, please refer to @basmilius/vite-preset

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { flux, preset } from '@basmilius/vite-preset'

export default defineConfig({
    plugins: [
        vue(),
        preset(),
        flux()
    ]
});

Step 3

For setting up icons, please refer to Font Awesome.

Step 4

Wrap your application in <FluxRoot> once, at the top level, and import the components you want to use:

App.vue

<template>
    <FluxRoot> 
        <FluxPane>
            <FluxSecondaryButton
                href="https://flux-ui.dev"
                label="Button"/>
        </FluxPane>
    </FluxRoot>
</template>

<script
    lang="ts"
    setup>
    import { FluxPane, FluxRoot, FluxSecondaryButton } from '@flux-ui/components'; 
</script>