Set up FlyonUI with Vuejs using Tailwind CSS

Set up FlyonUI with Vuejs using Tailwind CSS

Integrate FlyonUI with Vuejs and Tailwind CSS to build a modern, responsive UI, streamlining your development process with ease.

Installation

Please note that the plugin has been tested with the latest version of the framework (v3.5.13). The framework was installed using the standard `npm create vue@latest` command. If you are using your own project structure, be mindful of file paths!

Quick Vue.js setup

Vue is a progressive JavaScript framework for building modern web applications. If you haven't set up Tailwind CSS yet, check out Vue Tailwind CSS installation guides.

1
Install FlyonUI
Install flyonui via npm.
npm i flyonui

2

Add FlyonUI plugin

Include FlyonUI plugin in your main.css file.

@import "tailwindcss";
@plugin "flyonui";
@import "flyonui/variants.css";
@source "../node_modules/flyonui/flyonui.js"; // Add only if node_modules is gitignored

/* Import Third-party override css */
/* @import "flyonui/src/vendor/flatpickr.css"; */
/* @import "flyonui/src/vendor/notyf.css"; */
/* @import "flyonui/src/vendor/datatables.css"; */
/* @import "flyonui/src/vendor/editor.css"; */
/* @import "flyonui/src/vendor/fullcalendar.css"; */
/* @import "flyonui/src/vendor/raty.css"; */
/* @import "flyonui/src/vendor/waves.css"; */
/* @import "flyonui/src/vendor/apexcharts.css"; */

Note: If you want to include specific js component

Tip : Using specific components helps minimize the size of the generated JavaScript and CSS.

@source "../node_modules/flyonui/dist/accordion.js" // Specific JS component

3

Add type definitions for FlyonUI

Create the global.d.ts file in the project root directory.

import type { IStaticMethods } from "flyonui/flyonui";

declare global {
  interface Window {
    // Optional third-party libraries
    _;
    $: typeof import("jquery");
    jQuery: typeof import("jquery");
    DataTable;
    Dropzone;

    // FlyonUI
    HSStaticMethods: IStaticMethods;
  }
}

export {};

Note: If you want to include specific js component

import { HSAccordion } from "flyonui/flyonui";

declare global {
  interface Window {
    // Specific JS component
    HSAccordion: typeof HSAccordion;
  }
}

export {};

4

Add the FlyonUI JavaScript

Add the FlyonUI JavaScript in your app entry point root_directory/src/main.ts|js

...
// Optional third-party libraries
import $ from "jquery";
import _ from "lodash";
import noUiSlider from "nouislider";
import "datatables.net";
import "dropzone/dist/dropzone-min.js";

window._ = _;
window.$ = $;
window.jQuery = $;
window.DataTable = $.fn.dataTable;
window.noUiSlider = noUiSlider;

// FlyonUI
import "flyonui/flyonui";
...
app.mount("#app");

Note: If you want to include specific js component

...
import 'flyonui/dist/accordion';  // Import specific component JS
...
app.mount("#app");

5

Add a reinitialization helper (vue-router)

Add code that reinitializes the components every time the page is refreshed to your "route" root_directory/src/router/index.ts|js.

import { createRouter, createWebHistory } from 'vue-router'
...

const router = createRouter({
  ...
});

router.afterEach(async (to, from, failure) => {
  if (!failure) setTimeout(() => window.HSStaticMethods.autoInit(), 100);
});

export default router;

Note: If you want to include specific js component

router.afterEach(async (to, from, failure) => {
  if (!failure) setTimeout(() => window.HSAccordion.autoInit(), 100);
});

6

Add a reinitialization helper (without router)

Add code that reinitializes the components every time when app is mounted root_directory/src/App.vue

<script setup>
  onMounted(() => {
    setTimeout(() => window.HSStaticMethods.autoInit(), 100)
  });
</script>

...

Note: If you want to include specific js component

<script setup>
  onMounted(() => {
    setTimeout(() => window.HSAccordion.autoInit(), 100)
  });
</script>

Icons

For icons setup you can refer Icons page.

Framework guides