Getting Started

Installation

New Projects

If you are starting a new Vite + Vue project you can use our automatic flyonui-vue installation tool create-flyonui-vue:

Already existing Projects

Make sure that you have FlyonUI and Tailwind CSS installed.

1. Install flyonui-vue as a dependency using NPM or Yarn by running the following command:

or

in order to use icons, @iconify/vue is required:

2. Import styles:

3. Now you can use flyonui-vue anywhere in your project by importing the components you need.

Configuration (Optional)

Usage

FlyonUI Vue comes with a plugin that allows to customize the behaviour of default values. In order to use it just import it and use through your Vue app instance:

As you can see you have two properties global and components. The first one will let you configure the style of all components, while the second one will let you override it depending on the specific component you want it to be overridden. With the configuration above you will automatically have a default accent color and small size for all the components supporting them, except that the FoButton.vue will have a large size and the FoBadge.vue will have an info color as defaults. By doing this you will be able to use your vue components without specifying those props, for example:

A common use case is with icons and helper text, some components supports those to be positioned, so that you can either have an icon/helper-text on the left or on the right. In the provided configuration we specified to have the icon on all the components on the left and the helper text on the right, when available. Without configuration, you might end up in having a more complex structure for the icon and helper text. We suggest you to play with the configuration settings menu in the top right corner of this website and check the changes around the websites and the docs of each component. If you do not use any configuration at all the default values are used.

On demand manipulation

The configuration is saved into the local storage under the flyonui-vue-config key and provided through the vue app. A Vue Ref is exposed and can be manipulated on demand based on your desired behaviour if a dynamic configuration is needed. All you need to do is to use the composable: