Flux

Appearance

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:

shell
bun add @flux-ui/components
shell
pnpm install @flux-ui/components
shell
yarn add @flux-ui/components
shell
npm install @flux-ui/components

Step 2 ​

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

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

Step 3 ​

For setting up icons, please refer to Font Awesome.

Step 4 ​

Import the components you want to use, like this:

App.vue
vue
<template>
    <FluxPane> 
        <FluxSecondaryButton
            href="https://flux.bas.dev"
            label="Button"/>
    </FluxPane>
</template>

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

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:

shell
bun add @flux-ui/components sass-embedded @basmilius/vite-preset
shell
pnpm install @flux-ui/components sass-embedded @basmilius/vite-preset
shell
yarn add @flux-ui/components sass-embedded @basmilius/vite-preset
shell
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
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 ​

Import the components you want to use, like this:

App.vue
vue
<template>
    <FluxPane> 
        <FluxSecondaryButton
            href="https://flux.bas.dev"
            label="Button"/>
    </FluxPane>
</template>

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