• Set up FlyonUI with Tailwind CSS Vuejs

Set up FlyonUI with Tailwind CSS Vuejs

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 Checkout the Starter Kit

This repository consists of two branches:

  • main: Contains the FlyonUI Starter Kit with Vuejs, offering a clean and scalable foundation to kickstart your project.
  • components: Showcases practical examples of FlyonUI component usage within a Vuejs 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 the FlyonUI JavaScript in your app entry point root_directory/src/main.ts|js

    ... // 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"; ... app.mount("#app");

    Note: If you want to include specific js component

    ... import 'flyonui/dist/accordion'; // Import specific component JS ... app.mount("#app");
  • 5
    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' ...  const router = createRouter({  ... });  router.afterEach(async (to, from, failure) => {  if (!failure) setTimeout(() => window.HSStaticMethods.autoInit(), 100); });  export default router;

    Note: If you want to include specific js component

    router.afterEach(async (to, from, failure) => {  if (!failure) setTimeout(() => window.HSAccordion.autoInit(), 100); });
  • 6
    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>  onMounted(() => {  setTimeout(() => window.HSStaticMethods.autoInit(), 100)  }); </script>  ...

    Note: If you want to include specific js component

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

Icons

For icons setup you can refer Icons page.