• 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.

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

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.

FlyonUI + Vue 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.js file.

    // tailwind.config.js
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
    Add the FlyonUI JavaScript

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

    import "flyonui/flyonui";

    Note: If you want to include specific js component

    import 'flyonui/dist/js/accordion';  // Import specific component JS
  • 4
    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'

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

...

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

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

export default router;

    Note: If you want to include specific js component

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

router.afterEach((to, from, failure) => {
  if (!failure) {
    setTimeout(() => {
      window.HSAccordion.autoInit();  // Add particular component `autoInit()` method
    }, 100)
  }
});
  • 5
    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>
  import { onMounted } from 'vue';

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

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

...

    Note: If you want to include specific js component

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

onMounted(() => {
  setTimeout(() => {
    window.HSAccordion.autoInit();  // Add particular component `autoInit()` method
  }, 100)
});