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:

Installed flowbite as a dependency:

npm i flowbite

Added plugin in tailwind.config.js:

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

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);
    },
});

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. — kissu, Jul 05 '23 at 11:40

score 4 · Accepted Answer · edited Jul 03 '23 at 14:08

4

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!

edited Jul 03 '23 at 14:08

urosc

1,938
3
24
33

answered Apr 20 '23 at 06:53

Neha

2,136
5
21
50

score 1 · Answer 2 · answered Dec 23 '22 at 16:40

1

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

import 'flowbite';

answered Dec 23 '22 at 16:40

Igor M.

11
2

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](/help/how-to-answer). – Community Dec 26 '22 at 09:47

score 0 · Answer 3 · answered Oct 12 '22 at 08:08

0

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

Regarding a Flowbite + Nuxt setup, here you go: https://stackoverflow.com/a/71835459/8816585

answered Oct 12 '22 at 08:08

kissu

40,416
14
65
133

Yusuf Abid · Answer 4 · 2022-10-20T10:03:31.863

0

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

put the css and js files inside ./public/js/flowbite.js & ./public/css/flowbite.min.css
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>

edited Oct 20 '22 at 10:03

answered Oct 13 '22 at 20:05

Yusuf Abid

59
3

score 0 · Answer 5 · edited Dec 15 '22 at 14:02

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/

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

5 Answers5

Linked