• Set up FlyonUI with Nuxt using Tailwind CSS

Set up FlyonUI with Nuxt using Tailwind CSS

Easily set up FlyonUI in your Nuxt project with Tailwind CSS to build modern, responsive user interfaces with streamlined styling and flexibility.

https://cdn.flyonui.com/fy-assets/icons/nuxt-icon.png
nuxt logo

Quick Nuxt setup

Nuxt is an intuitive web framework. If you haven’t configured Tailwind CSS yet, refer to the Nuxt Tailwind CSS installation guides.

FlyonUI + Nuxt Checkout the Starter Kit
  • 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

    @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 FlyonUI JavaScript inside the project, e.g. root_directory/plugins/flyonui.client.ts

    import { useRouter } from "vue-router";

// 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";

export default defineNuxtPlugin(() => {
  const router = useRouter();
  router.afterEach(async () => {
    setTimeout(() => window.HSStaticMethods.autoInit());
  });
});

    Note: If you want to include specific js component

    import { useRouter } from "vue-router";

import "flyonui/dist/accordion";

export default defineNuxtPlugin(() => {
  const router = useRouter();
  router.afterEach(async () => {
    setTimeout(() => window.HSAccordion.autoInit());
  });
});

Icons

For icons setup you can refer Icons page.