Reputation: 208
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
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
Upvotes: 3