Skip to content

Flowbite Vue - Quickstart

Get started with Flowbite by including it into your project using NPM

Flowbite is a library of components built on top of the utility-classes from Tailwind CSS and it also includes a JavaScript file that makes interactive elements works, such as modals, dropdowns, and more. Learn how to get started by following this quickstart guide.


INFO

Make sure that you have Node.js installed. Flowbite Vue requires version 18 or newer.

bash
node -v

Install and configure TailwindCSS

  1. Install Tailwind CSS as part of devDependencies:
bash
npm install -D tailwindcss @tailwindcss/vite
  1. Configure the Vite plugin:
js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    vue(),
    tailwindcss(),
  ],
})
  1. Import Tailwind CSS
css
@import "tailwindcss";

INFO

Remember to @reference your main style in <style> blocks if you want to use directives from Tailwind CSS.

vue
<style scoped>
@reference "./style.css";

.custom-class {
  @apply border rounded p-3;
}
</style>

Install and configure Flowbite Vue

  1. Install Flowbite and Flowbite Vue as part of dependencies:
bash
npm i flowbite flowbite-vue
  1. Update style.css file
css
/* import Flowbite Vue styles */
@import "flowbite-vue/index.css";

/* import Flowbite plugin */
@plugin "flowbite/plugin";

/* add Flowbite Vue directory using @source directive */
@source "../node_modules/flowbite-vue";
  1. Now you can use Flowbite Vue anywhere in your project and build awesome interfaces:
vue
<template>
  <fwb-alert type="success">
    Success! You can now use Flowbite Vue in your Vue application 🎉
  </fwb-alert>
</template>

<script setup>
import { FwbAlert } from 'flowbite-vue'
</script>

Released under the MIT License.