• Set up FlyonUI with Tailwind CSS Nuxt

Set up FlyonUI with Tailwind CSS Nuxt

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

This repository consists of two branches:

  • main: Contains the FlyonUI Starter Kit with Nuxtjs, offering a clean and scalable foundation to kickstart your project.
  • components: Showcases practical examples of FlyonUI component usage within a Nuxtjs environment
  • 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"; 

/* 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.