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.

## Require via NPM ​

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

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

2. 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: {}
    }

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