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

Using Nuxt? Flowbite Vue ships a dedicated module with component/composable auto-import and auto-injected styles — see the Nuxt guide.

INFO

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

node -v

Install and configure TailwindCSS

1. Install Tailwind CSS as part of devDependencies:

npm install -D tailwindcss @tailwindcss/vite

2. Configure the Vite plugin:

vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    vue(),
    tailwindcss(),
  ],
})

3. Import Tailwind CSS

src/style.css

@import "tailwindcss";

INFO

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

<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:

npm i flowbite flowbite-vue

2. Update style.css file

/* import Flowbite Vue styles */
@import "flowbite-vue/index.css";

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

flowbite-vue/index.css is a prebuilt, self-contained stylesheet — it already includes every utility class Flowbite Vue's components use, so there's no need to add a @source directive pointing at node_modules/flowbite-vue.

4. Now you can use Flowbite Vue anywhere in your project and build awesome interfaces:

Success! You can now use Flowbite Vue in your Vue application 🎉

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