1

I want to install Flowbite in my existing Laravel/Tailwind installation and I have followed all the steps from here but when they tell me to add the .JS file I just can't seem to find it. I tried to run the default commands npm run dev / npm run prod but that file just doesn't show up and I can't seem to find any kind of information about it since every blog/article seems to just copy-paste the original 'tutorial' from Flowbite.

  1. I added "./node_modules/flowbite/**/*.js"in content in tailwind.config.js
  2. I added require('flowbite/plugin') in plugins in tailwind.config.js
  3. I run npm run prod / npm run dev
  4. Where is that file?!

I don't think I'm suppose to copy those files from the node_modules folder, so what am I missing here?

EDIT:

Importing "import 'flowbite';" in Webpack.mix.js gives me the following error: SyntaxError: Cannot use import statement outside a module

OminousMusic
  • 69
  • 1
  • 8
  • Did you checked this : https://flowbite.com/docs/getting-started/laravel/ – yanir midler Aug 10 '22 at 09:15
  • 1
    Yes, that's exactly what I followed. My question is, where do I find flowbite.js? how do I access it? Do I need to import it somehow into tailwind.config.js or something like that? – OminousMusic Aug 10 '22 at 09:26

3 Answers3

2

So for someone who's having trouble installing flowbite and wants to implementing a none CDN approach and want to utilize the npm approach you have to add below script on your webpack.min.js

   mix.js("resources/js/app.js", "public/js")
    .js("./node_modules/flowbite/src/flowbite.js", "public/js")
    .postCss("resources/css/app.css", "public/css", [require("tailwindcss")])
    .postCss("./node_modules/flowbite/src/flowbite.css", "public/css");

This will create a flowbite.js inside your public/js together with app.js then just include it on your layout template before tag ends the defer is optional and on the head tag the css.

 <link href="{{ asset('css/flowbite.css') }}" rel="stylesheet">

 <script defer src="{{ asset('js/flowbite.js') }}"></script>

Don't forget to restart your server.

Sarotobi
  • 707
  • 1
  • 9
  • 28
1

This is coming four months late, but this is what worked for me:

I followed the Quickstart from the Flowbite official documentation until the point where the instruction says to: "Include the main JavaScript file to make interactive elements work."

<script src="../path/to/flowbite/dist/flowbite.min.js"></script>

Since I couldn't find the said file, I created a new directory in my 'public' folder like so:

public/backend/flowbite/dist

After which I copied the flowbite.js from the flowbite directory in node_modules directory into the newly created dist directory.

I included the script tag at the bottom of my layout file like so:

<script src="{{ asset('backend/flowbite/dist/flowbite.js) }}"></script>

I copied one of the interactive elements I wanted to work with and voila, it worked perfectly fine.

PS: I skipped the below section and didn't include it in any file in my project:

import 'flowbite';

This may not be the ideal solution, but it works.

Godwin Iyamba
  • 9
  • 3
0

Just only add this line of code to the tailwind.config.js file

plugins: [
    require('flowbite/plugin')
],
Asplund
  • 2,254
  • 1
  • 8
  • 19
kamran afridi
  • 1