Skip to content

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.

Step 1

Open your project's root directory in your terminal.

Step 2

Run the following command to install Flux.

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

Step 3

Once the installation is complete add the following to your main.ts file.

Step 4

For setting up icons, please refer to Font Awesome.

Step 5

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/flux'; 
</script>
ts
import '@flux-ui/flux/style.css';