• 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 Explore playground demo on StackBlitz
  • 1
    Install FlyonUI

    Install flyonui via npm.

    npm i flyonui
  • 2
    Configure FlyonUI JavaScript paths

    Add the path to FlyonUI JavaScript files in your tailwind.config.ts file.

    // tailwind.config.ts
module.exports = {
  content: [
    './node_modules/flyonui/dist/js/*.js',
  ],
  plugins: [
    require('flyonui'), 
    require('flyonui/plugin')
  ],
}

    Note: If you want to include specific js component

    module.exports = {
  content: ["./node_modules/flyonui/dist/js/accordion.js"],  // Specific JS component
}
  • 3
    Create FlyonUI JavaScript loader

    Create the FlyonUI JavaScript loader inside the project, e.g. root_directory/plugins/flyonui.client.ts

    import "flyonui/flyonui";
import { type IStaticMethods } from "flyonui/flyonui";
declare global {
  interface Window {
    HSStaticMethods: IStaticMethods;
  }
}

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.hook("page:finish", () => {
    window.HSStaticMethods.autoInit();
  });
});

    Note: If you want to include specific js component

    import "flyonui/dist/js/accordion";

import { type HSAccordion } from "flyonui/flyonui";
declare global {
  interface Window {
    HSAccordion: typeof HSAccordion;
  }
}

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.hook("page:finish", () => {
    window.HSAccordion.autoInit();    // Add particular component `autoInit()` method
  });
});
  • 4
    Add the FlyonUI JavaScript loader

    Include FlyonUI JavaScript loader to the nuxt.config.ts file.

    export default defineNuxtConfig({
  ...
  plugins: ["~/plugins/flyonui.client.ts"],
});