CODEWITHSUNDEEP
vue.jstailwind-cssviteflowbite
Oussama ELJabbari
Oussama ELJabbari

Reputation: 115

Flowbite modal not showing

I am trying to use flowbite components in my project but they are not working , (e.g dropdown, modal,...).

I followed the documentation but nothing works.

I'm using vuejs 3, Vite v2.9.9.

This is my main.js file:

import { createApp } from 'vue'
import App from "@/App.vue";
import router from './router/index'
import store from './state/store'

// Imported css file [TailwindCSS]
import './index.css'

// Imported flowbite
import 'flowbite';

createApp(App)
    .use(router)
    .use(store)
    .mount('#app')

modal.vue

<template>

  <!-- Modal toggle -->
  <button class="block text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" type="button" data-modal-toggle="default-modal">
    Toggle modal
  </button>

  <!-- Main modal -->
  <div id="default-modal" aria-hidden="true" class="hidden overflow-y-auto overflow-x-hidden fixed right-0 left-0 top-4 z-50 justify-center items-center h-modal md:h-full md:inset-0">
      <div class="relative px-4 w-full max-w-2xl h-full md:h-auto">
          <!-- Modal content -->
          <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
              <!-- Modal header -->
              <div class="flex justify-between items-start p-5 rounded-t border-b dark:border-gray-600">
                  <h3 class="text-xl font-semibold text-gray-900 lg:text-2xl dark:text-white">
                      Terms of Service
                  </h3>
                  <button type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-toggle="default-modal">
                      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>  
                  </button>
              </div>
              <!-- Modal body -->
              test
              <!-- Modal footer -->
              <div class="flex items-center p-6 space-x-2 rounded-b border-t border-gray-200 dark:border-gray-600">
                  <button data-modal-toggle="default-modal" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">I accept</button>
                  <button data-modal-toggle="default-modal" type="button" class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:ring-gray-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600">Decline</button>
              </div>
          </div>
      </div>
  </div>
</template>

Upvotes: 5

Views: 6691

Answers (6)

Yusron_Aminullah
Yusron_Aminullah

Reputation: 1

In file main.js you add this :

import 'flowbite/dist/flowbite.js';
import 'flowbite/dist/flowbite.css';
import './index.css'

And in file tailwind.config.js you add this :

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
    './node_modules/flowbite/**/*.{js,jsx,ts,tsx}'
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require('flowbite/plugin')
  ],
}

If you use vite. Open vite.config.js and add this :

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import flowbite from 'flowbite/plugin'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), flowbite()],
})

Open file where you add component flowbite. In this, i use sidebar dropdown from flowbite. in some cases the possibility is the same, including modal :

in :

import Sidebar from './Sidebar.vue';
import { onMounted } from 'vue';
import { Dropdown } from 'flowbite';

onMounted(() => {
  // Initialize all dropdowns
  const dropdownElements = document.querySelectorAll('[data-dropdown-toggle]');
  dropdownElements.forEach(triggerEl => {
    const targetEl = document.getElementById(triggerEl.getAttribute('data-dropdown-toggle'));
    new Dropdown(targetEl, triggerEl);
  });
});

And in :

<Sidebar />

Upvotes: 0

Yusron_Aminullah
Yusron_Aminullah

Reputation: 1

This work in my Project. I use vue framework : paste this in file main.js

import 'flowbite/dist/flowbite.js'

Upvotes: 0

sba
sba

Reputation: 411

The component doc should mention that you need to properly setup flowbite before expecting anything to show up. For me it was all 4 steps. So thank to this thread i needed only a few minutes to figure it out / get it running.

Of course as developer you assume that the consumers (we) set up the framework properly before expecting it to show results and we expect to see all the hints everywhere. Its just a different way of thinking..

Upvotes: 0

Jerwin Mathew Aton
Jerwin Mathew Aton

Reputation: 77

This took me 2 weeks to figure out, I am using Vite with Vue.

I followed the instructions here https://flowbite.com/docs/getting-started/vue/

Where it didn't state to add the script tag <script src="./node_modules/flowbite/dist/flowbite.js"></script>
in my index.html

Which is, stated in #3 https://flowbite.com/docs/getting-started/quickstart/

Upvotes: 2

Victor
Victor

Reputation: 11

Okay, so what I did to make it work is to create the Modal with Javascript (check here the flowbite documentation) instead of using this data-modal-toggle="defaultModal" property defined in the html component. Find below an example with Vue3 Single File Component. For other frameworks the solution should be similar.

<template>
  <!-- Modal toggle -->
  <button class="block text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" type="button" @click="toggleModal">
    Toggle modal
  </button>
  
  <!-- Main modal -->
  <div id="defaultModal" tabindex="-1" aria-hidden="true" class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 w-full md:inset-0 h-modal md:h-full justify-center items-center">
      <div class="relative p-4 w-full max-w-2xl h-full md:h-auto">
          <!-- Modal content -->
          <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
              <!-- Modal header -->
              <div class="flex justify-between items-start p-4 rounded-t border-b dark:border-gray-600">
                  <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
                      Terms of Service
                  </h3>
                  <button type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white" @click="toggleModal">
                      <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
                      <span class="sr-only">Close modal</span>
                  </button>
              </div>
              <!-- Modal body -->
              <div class="p-6 space-y-6">
                  <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
                      With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply.
                  </p>
                  <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
                      The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as possible of high-risk data breaches that could personally affect them.
                  </p>
              </div>
              <!-- Modal footer -->
              <div class="flex items-center p-6 space-x-2 rounded-b border-t border-gray-200 dark:border-gray-600">
                  <button @click="toggleModal" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">I accept</button>
                  <button @click="toggleModal" type="button" class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600">Decline</button>
              </div>
          </div>
      </div>
  </div>
  </template>
  
  <script>
  export default {
      data() {
         return{
            modal: ''
        }
          
      },
      methods: {
          toggleModal() {
              this.modal.toggle();
          }
      },
      mounted() {
          // set the modal menu element
          const targetEl = document.getElementById('defaultModal');
  
          // options with default values
          const options = {
          placement: 'center',
          backdropClasses: 'bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40',
          onHide: () => {
              console.log('modal is hidden');
          },
          onShow: () => {
              console.log('modal is shown');
          },
          onToggle: () => {
              console.log('modal has been toggled');
          }
          };
  
          this.modal = new Modal(targetEl, options);
    } 
  }
  </script>

Upvotes: 1

chs
chs

Reputation: 46

I had the same problem at svelte.

I finally solved it:

import 'flowbite/dist/flowbite.js'
...
let modal = new Modal(document.getElementById('modalId'),{placement:'center'})
...
<button on:cllick={()=>modal.show()} >Open</button>

Upvotes: 2

Related Questions