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.

Require via NPM

Make sure that you have Node.js and Tailwind CSS installed.

Install flowbite and flowbite-vue as a dependency using NPM by running the following command:

bash

npm i flowbite flowbite-vue

npm i flowbite flowbite-vue

Require Flowbite as a plugin inside the tailwind.config.js and add flowbite-vue dist folder to tailwind content:

javascript

module.exports = {
  content: [
    'node_modules/flowbite-vue/**/*.{js,jsx,ts,tsx,vue}',
    'node_modules/flowbite/**/*.{js,jsx,ts,tsx}'
  ],
  plugins: [
      require('flowbite/plugin')
  ],
  theme: {}
}

module.exports = {
  content: [
    'node_modules/flowbite-vue/**/*.{js,jsx,ts,tsx,vue}',
    'node_modules/flowbite/**/*.{js,jsx,ts,tsx}'
  ],
  plugins: [
      require('flowbite/plugin')
  ],
  theme: {}
}

Import Flowbite Vue styles:

javascript

//in your `main.js` file
import '../node_modules/flowbite-vue/dist/index.css'

//in your `main.js` file
import '../node_modules/flowbite-vue/dist/index.css'

css

/* or in your `app.css` file */
@import '/node_modules/flowbite-vue/dist/index.css';

/* or in your `app.css` file */
@import '/node_modules/flowbite-vue/dist/index.css';

Now you can use flowbite-vue anywhere in your project and build awesome interfaces:

vue

<template>
  <fwb-dropdown text="Click me" placement="top">
    <fwb-list-group>
      <fwb-list-group-item>Item #1</fwb-list-group-item>
      <fwb-list-group-item>Item #2</fwb-list-group-item>
      <fwb-list-group-item>Item #3</fwb-list-group-item>
    </fwb-list-group>
  </fwb-dropdown>
</template>

<script setup>
import { FwbDropdown, FwbListGroup, FwbListGroupItem } from 'flowbite-vue'
</script>

<template>
  <fwb-dropdown text="Click me" placement="top">
    <fwb-list-group>
      <fwb-list-group-item>Item #1</fwb-list-group-item>
      <fwb-list-group-item>Item #2</fwb-list-group-item>
      <fwb-list-group-item>Item #3</fwb-list-group-item>
    </fwb-list-group>
  </fwb-dropdown>
</template>

<script setup>
import { FwbDropdown, FwbListGroup, FwbListGroupItem } from 'flowbite-vue'
</script>

Make sure you have tailwind css imported. https://tailwindcss.com/docs/guides/vite

@tailwind base;
@tailwind components;
@tailwind utilities;

@tailwind base;
@tailwind components;
@tailwind utilities;

Flowbite Vue - Quickstart ​

Require via NPM ​

Flowbite Vue - Quickstart

Require via NPM