CODEWITHSUNDEEP
javascriptcssvuejs3tailwind-cssflowbite
henrbu
henrbu

Reputation: 208

Flowbite doesn't work in components, but works in the root

struggling to set up Flowbite for a while. I followed their tutorial - flowbite docs. However, the dropdown and other elements are not interactive. I have a feeling, that for some reason Javascript is not activated, because whenever I click on elements like dropdowns - nothing happens. I'm using Vue and if I try to use a random navbar with dropdowns in the index.html everything is working fine. However, whenever I try to use it in a component it doesn't work.

Here's my tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}', './node_modules/flowbite/**/*.js'],
  theme: {
    extend: {},
  },
  plugins: [require('flowbite/plugin')],
  variants: {
    extend: {
      animation: ['group-hover'],
    },
  },
};

main.ts file:

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import './index.css';
import 'flowbite';
createApp(App).use(store).use(router).mount('#app');

And the dependencies, as you see the flowbite is here:

"dependencies": {
    "autoprefixer": "^9.8.8",
    "core-js": "^3.6.5",
    "flowbite": "^1.5.3",
    "postcss": "^7.0.39",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17",
    "vue": "^3.0.0",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0"
},

Upvotes: 2

Views: 1765

Answers (1)

Gad Iradufasha
Gad Iradufasha

Reputation: 161

As you've already had flowbite installed make sure your setup follow these rules

npm i flowbite flowbite-vue Require flowbite as a plugin inside the tailwind.config.js file:

module.exports = {
  content: [
    ...,
    'node_modules/flowbite-vue/**/*.{js,jsx,ts,tsx}'
  ],
  plugins: [..., require('flowbite/plugin')],
};

And I also recommend you re-read docs from official site

Flowbite site

Upvotes: 3

Related Questions