How to add Flowbite Tailwind plugin to my Laravel 9 + Vite project?

Question

I tried adding flowbite to my Laravel project. I am using Laravel version 9 with Vite.

So far, I did the following steps:

1. Installed flowbite as a dependency:

npm i flowbite

2. Added plugin in tailwind.config.js:

plugins: [
  require('@tailwindcss/forms'),
  require('@tailwindcss/typography'),
  require('flowbite/plugin')
],  

3. I imported it in App.js:

import Flowbite from 'flowbite';


4. Then I ran the app:
```shell
npm run dev

I also tried adding it using CDN links, but it's not working.

Could someone please tell me what I am doing wrong? Or maybe you can suggest me a better library to use with Tailwind CSS, as Tailwind doesn't provide js components like tooltip, dropdown, etc.

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
    setup({ el, app, props, plugin }) {
        return createApp({ render: () => h(app, props) })
            .use(plugin)
            .use(ZiggyVue, Ziggy)
            .mixin({ components: { FilePond } })
            .mount(el);
    },
});

Beslobber

Keep your question properly formatted rather than rollback'ing it to a previous state, your question is self-answered anyway so I don't really see the benefit of making the question look worse. – Billow

Answer 1

I have found a solution for this issue. In the Main App.vue file, I imported initFlowbite from 'flowbite' and called it within the onMounted lifecycle hook like this:

In the Main App.vue

import { initFlowbite } from 'flowbite';
    
onMounted(() => {
  initFlowbite();
});

I hope this helps!

Beslobber

Answer 2

For me worked to add this line of code in to the app.js

import 'flowbite';

Nolasco

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Sightread

Answer 3

You can use this if you want some logic: https://headlessui.com/

Regarding a Flowbite + Nuxt setup, here you go: https://mcmap.net/q/2035872/-how-to-setup-flowbite-with-nuxt-closed

Billow

Answer 4

This is not the best solutions but you can give it a try to install Flowbite without any settings:

1. put the css and js files inside ./public/js/flowbite.js & ./public/css/flowbite.min.css
2. put the code below in your blade templates

<link href="{{ url('css/flowbite.min.css') }}" rel="stylesheet" />
<script src="{{ url('js/flowbite.js') }}" type="text/javascript"></script>

Hygrometry

Answer 5

This answer based on https://flowbite.com/docs/getting-started/laravel/

For what I do, if you add it to app.js, you can fully import into your app.js using this syntax

import "../../path/to/node_modules/flowbite/dist/flowbite"; // @see https://flowbite.com/docs/getting-started/laravel/

Then on your vite, import the app.js normally, as you do

<script src="{{ \Illuminate\Support\Facades\Vite::asset('resources/js/app.js') }}"></script>

That will work as it's, for tooltips, etc, see on each docs like https://flowbite.com/docs/components/tooltips/

Greeneyed