Installation

To start using Flux Application 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 Application, ensuring you can quickly integrate its components into your development workflow.

TIP

Flux Application relies on Vue Router for its named-view based context menus. Make sure Vue Router is installed and configured in your project before using the components.

Plain installation

TIP

This is the most recommended way to use Flux Application. Use this form of installation if you don't need to customize the style of Flux Application 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/application @flux-ui/components

PNPM

pnpm install @flux-ui/application @flux-ui/components

Yarn

yarn add @flux-ui/application @flux-ui/components

NPM

npm install @flux-ui/application @flux-ui/components

Step 2

Once the installation is complete, you need to add the following line to your main.ts file:

main.ts

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

Step 3

Import the components you want to use, like this:

App.vue

<template>
    <FluxApplication> 
        <template #menu>
            <FluxApplicationMenu>
                <!-- Menu items. -->
            </FluxApplicationMenu>
        </template>

        <FluxApplicationContent>
            <FluxApplicationHero
                title="Welcome"
                subtitle="Your application starts here."/>
        </FluxApplicationContent>
    </FluxApplication>
</template>

<script
    setup
    lang="ts">
    import { FluxApplication, FluxApplicationContent, FluxApplicationHero, FluxApplicationMenu } from '@flux-ui/application'
</script>

Vite-preset installation

TIP

Only use this form of installation if you need more control of Flux Application and need the Flux Application 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/application @flux-ui/components sass-embedded @basmilius/vite-preset

PNPM

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

Yarn

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

NPM

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

Step 2

Once the installation is complete, you need to configure your vite.config.ts file to use Flux Application.

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, fluxApplication, preset } from '@basmilius/vite-preset'

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

Step 3

Import the components you want to use as shown in step 3 of the plain installation.