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.