How to set up Flowbite in NUXT js

siumhossain commented 2 years ago

I installed tailwind css from default NUXT cli. And now i want to add flowbite in my nuxt application. How can i do that? Thanks in advance ❤️

package.json


{
  "name": "nmdeia",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "@nuxtjs/axios": "^5.13.6",
    "core-js": "^3.19.3",
    "nuxt": "^2.15.8",
    "vue": "^2.6.14",
    "vue-server-renderer": "^2.6.14",
    "vue-template-compiler": "^2.6.14",
    "webpack": "^4.46.0"
  },
  "devDependencies": {
    "@nuxtjs/tailwindcss": "^4.2.1",
    "postcss": "^8.4.4"
  }
}
``

kissu commented 2 years ago

Regarding this reply and my answer on Stackoverflow, it's fair to say that Nuxt is not supported as of right now.

It would be nice to have some clear message indicating that Nuxt is not being supported. I've spent 3 laborious hours trying to get this one working.

nejckorosec commented 2 years ago

Nuxt 3 configuration Install flowbite and add configuration to tailwind.config.js

module.exports = {
  content: ['./node_modules/flowbite/**/*.js'],
  theme: {
    extend: {},
  },
  plugins: [require('flowbite/plugin')],
};

Create new nuxt client plugin (e.g.: plugins/flowbite.client.ts)

import flowbite from 'flowbite';

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(flowbite);
});

Restart the server and refresh the page.

kissu commented 2 years ago

@nejckorosec looks like it's a working configuration indeed!

Here is an exact reproduction: https://github.com/kissu/n3-configure-flowbite

oripka commented 2 years ago

Development mode works but I get an error when building


file: /app/plugins/flowbite.client.ts:1:0
1: import flowbite from 'flowbite';
   ^
2: 
3: export default defineNuxtPlugin((nuxtApp) => {

 ERROR  'default' is not exported by node_modules/flowbite/dist/flowbite.js, imported by plugins/flowbite.client.ts                                                 09:47:17

  at error (node_modules/rollup/dist/shared/rollup.js:198:30)
  at Module.error (node_modules/rollup/dist/shared/rollup.js:12537:16)
  at Module.traceVariable (node_modules/rollup/dist/shared/rollup.js:12896:29)
  at ModuleScope.findVariable (node_modules/rollup/dist/shared/rollup.js:11525:39)
  at ReturnValueScope.findVariable (node_modules/rollup/dist/shared/rollup.js:6492:38)
  at ChildScope.findVariable (node_modules/rollup/dist/shared/rollup.js:6492:38)
  at Identifier.bind (node_modules/rollup/dist/shared/rollup.js:7784:40)
  at CallExpression.bind (node_modules/rollup/dist/shared/rollup.js:5353:31)
  at CallExpression.bind (node_modules/rollup/dist/shared/rollup.js:8966:15)
  at ExpressionStatement.bind (node_modules/rollup/dist/shared/rollup.js:5357:23)```

Supernectar commented 2 years ago

@nejckorosec looks like it's a working configuration indeed!

Here is an exact reproduction: https://github.com/kissu/n3-configure-flowbite

This solution only works for a single vue page, as soon as the DOM changes (by introducing vue components and NuxtLink's to the project) every flowbite component that requires js becomes unresponsive, such as modals, dropdowns, etc...

Shmookoff commented 2 years ago

Development mode works but I get an error when building

Has anyone managed to get this working?

jpoechill commented 2 years ago

Development mode works but I get an error when building

Has anyone managed to get this working?

@oripka @Shmookoff

hack: bypass nuxt's plugin installation feature altogether and install via. official cdn: flowbite docs

(nuxt.config.ts)

export default defineNuxtConfig({
    meta: {
        lang: 'en',
        link: [
            { rel: "stylesheet", href: "https://unpkg.com/flowbite@1.4.5/dist/flowbite.min.css" },
        ],
        script: [
            { src: 'https://unpkg.com/flowbite@1.4.5/dist/flowbite.js' }
        ]
    }
})

dxxta commented 2 years ago

it works for me :

"nuxt": "^2.15.8"

plugins/utils.client.js :

import Vue from 'vue'
import flowbite from 'flowbite'
Vue.use(flowbite)

nuxt.config.js :

plugins: [
    { src: '~/plugins/utils.client.js', ssr: false },
 ],

nejckorosec commented 2 years ago

Since Nuxt is not production-ready and Flowbite doesn't have any install recommendations yet, you can use CDN option OR go with hackish way -> to flowbite file in node modules (node_modules/flowbite/dist/flowbite.js) add: export default {} at the end. This is a temporary solution (and not the right one) - hope flowbite will support nuxt 👍

alorence commented 2 years ago

@nejckorosec looks like it's a working configuration indeed!

Here is an exact reproduction: https://github.com/kissu/n3-configure-flowbite

This solution only works for a single vue page, as soon as the DOM changes (by introducing vue components and NuxtLink's to the project) every flowbite component that requires js becomes unresponsive, such as modals, dropdowns, etc...

This may be linked to #3. I just oopened a PR to solve that issue.

zoltanszogyenyi commented 2 years ago

Hey everyone,

Please check out the Flowbite Vue component library for Vue & Nuxt.js projects.

Until then, I will take a look into this either way.

mohammadmrd74 commented 2 years ago

import like this: import * as twelements from 'tw-elements/dist/js/index.min.js';

jpoechill commented 2 years ago

it works for me :

"nuxt": "^2.15.8"

plugins/utils.client.js :
import Vue from 'vue'
import flowbite from 'flowbite'
Vue.use(flowbite)
nuxt.config.js :
plugins: [
    { src: '~/plugins/utils.client.js', ssr: false },
 ],

future reference for Nuxt 3

plugins/utils.client.js :

import flowbite from 'flowbite'

export default defineNuxtPlugin((NuxtApp) => {
    NuxtApp.vueApp.use(flowbite)
})

vinksz commented 2 years ago

Development mode works but I get an error when building

Has anyone managed to get this working?

@oripka @Shmookoff

hack: bypass nuxt's plugin installation feature altogether and install via. official cdn: flowbite docs

(nuxt.config.ts)
export default defineNuxtConfig({
    meta: {
        lang: 'en',
        link: [
            { rel: "stylesheet", href: "https://unpkg.com/flowbite@1.4.5/dist/flowbite.min.css" },
        ],
        script: [
            { src: 'https://unpkg.com/flowbite@1.4.5/dist/flowbite.js' }
        ]
    }
})

WARN flowbite doesn't appear to be written in CJS, but also doesn't appear to be a valid ES module (i.e. it doesn't have "type": "module" or an .mjs extension for the entry point). Please contact the package author to fix.

√ Server built in 1129ms 14:08:24
√ Generated public .output/public nitro 14:08:24
start Building server... nitro 14:08:24

ERROR Rollup error: EISDIR: illegal operation on a directory, readlink 'Z:\Code\n3-configure-flowbite\node_modules\destr\dist\index.mjs' nitro 14:08:27

ERROR EISDIR: illegal operation on a directory, readlink 'Z:\Code\n3-configure-flowbite\node_modules\destr\dist\index.mjs'

dimunyo commented 2 years ago

Development mode works but I get an error when building

file: /app/plugins/flowbite.client.ts:1:0
1: import flowbite from 'flowbite';
   ^
2: 
3: export default defineNuxtPlugin((nuxtApp) => {

 ERROR  'default' is not exported by node_modules/flowbite/dist/flowbite.js, imported by plugins/flowbite.client.ts                                                 09:47:17

  at error (node_modules/rollup/dist/shared/rollup.js:198:30)
  at Module.error (node_modules/rollup/dist/shared/rollup.js:12537:16)
  at Module.traceVariable (node_modules/rollup/dist/shared/rollup.js:12896:29)
  at ModuleScope.findVariable (node_modules/rollup/dist/shared/rollup.js:11525:39)
  at ReturnValueScope.findVariable (node_modules/rollup/dist/shared/rollup.js:6492:38)
  at ChildScope.findVariable (node_modules/rollup/dist/shared/rollup.js:6492:38)
  at Identifier.bind (node_modules/rollup/dist/shared/rollup.js:7784:40)
  at CallExpression.bind (node_modules/rollup/dist/shared/rollup.js:5353:31)
  at CallExpression.bind (node_modules/rollup/dist/shared/rollup.js:8966:15)
  at ExpressionStatement.bind (node_modules/rollup/dist/shared/rollup.js:5357:23)```

Im currently having the same issue

Daedra22 commented 2 years ago

Same issue, works in dev but not in prod. This is so exhausting with nuxt 3 everything is buggy, first nuxt-img now this. Why you advertise it so extremely if it barely works...

IvanGodinez21 commented 2 years ago

Nuxt 3 configuration Install flowbite and add configuration to tailwind.config.js
module.exports = {
  content: ['./node_modules/flowbite/**/*.js'],
  theme: {
    extend: {},
  },
  plugins: [require('flowbite/plugin')],
};
Create new nuxt client plugin (e.g.: plugins/flowbite.client.ts)
import flowbite from 'flowbite';

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(flowbite);
});
Restart the server and refresh the page.

I think I found a temporary solution, just import * as flowbite from 'flowbite'. It worked for me in dev and production.

import * as flowbite from 'flowbite';

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(flowbite);
});

rafaeldsousa commented 2 years ago

Experiencing a strange issue.

I could get Flowbite setup and running on Nuxt 3, both via plugin or adding it via nuxt.config.ts script.

My problem is that everything works fine, as long as I don't navigate to another view. When navigating to another view, or just forward and back to where I came from, the library doesn't seem to pick up on the change and doesn't try to initiate the components. It only comes back to life after a full browser refresh.

nuxt.config.ts

app: {
    head: {
      script: [
        {
          hid: 'flowbite',
          src: 'https://unpkg.com/flowbite@1.5.3/dist/flowbite.js',
          defer: true
        }
      ]
    }
  }

Or via plugin, as referenced here https://github.com/themesberg/flowbite/issues/131#issuecomment-1100830582, a warning comes up about the imported Flowbite library, which is one of the reasons I ended up just using the nuxt.config.ts version.

Is this something any of you have faced before?

https://user-images.githubusercontent.com/39249777/199883180-73d66727-9e71-4e9c-97d9-ba387a3a1af9.mov

dimunyo commented 1 year ago

Nuxt 3 configuration Install flowbite and add configuration to tailwind.config.js
module.exports = {
  content: ['./node_modules/flowbite/**/*.js'],
  theme: {
    extend: {},
  },
  plugins: [require('flowbite/plugin')],
};
Create new nuxt client plugin (e.g.: plugins/flowbite.client.ts)
import flowbite from 'flowbite';

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(flowbite);
});
Restart the server and refresh the page.
I think I found a temporary solution, just import * as flowbite from 'flowbite'. It worked for me in dev and production.
import * as flowbite from 'flowbite';

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(flowbite);
});

Does your Datepicker works? Mine does not work Properly

pedrohavay commented 1 year ago

Development mode works but I get an error when building

file: /app/plugins/flowbite.client.ts:1:0
1: import flowbite from 'flowbite';
   ^
2: 
3: export default defineNuxtPlugin((nuxtApp) => {

 ERROR  'default' is not exported by node_modules/flowbite/dist/flowbite.js, imported by plugins/flowbite.client.ts                                                 09:47:17

  at error (node_modules/rollup/dist/shared/rollup.js:198:30)
  at Module.error (node_modules/rollup/dist/shared/rollup.js:12537:16)
  at Module.traceVariable (node_modules/rollup/dist/shared/rollup.js:12896:29)
  at ModuleScope.findVariable (node_modules/rollup/dist/shared/rollup.js:11525:39)
  at ReturnValueScope.findVariable (node_modules/rollup/dist/shared/rollup.js:6492:38)
  at ChildScope.findVariable (node_modules/rollup/dist/shared/rollup.js:6492:38)
  at Identifier.bind (node_modules/rollup/dist/shared/rollup.js:7784:40)
  at CallExpression.bind (node_modules/rollup/dist/shared/rollup.js:5353:31)
  at CallExpression.bind (node_modules/rollup/dist/shared/rollup.js:8966:15)
  at ExpressionStatement.bind (node_modules/rollup/dist/shared/rollup.js:5357:23)```

Im currently having the same issue

None of the above solutions worked for my project, I'm using version 3.0.0 of nuxt and ^1.5.4 of flowbite.

However, I was curious and went to analyze the difference in package versions and realized that flowbite changed the export structure of the main file. Based on that, I changed the flowbite.client.ts file to the following:

import flowbite from 'flowbite/src/flowbite';

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component(flowbite)
});

And it worked for me!

hardikdangar commented 1 year ago

@pedrohavay

i am on node 18.12.0

and this is my package.json "devDependencies": { "autoprefixer": "^10.4.13", "nuxt": "3.0.0", "postcss": "^8.4.20", "tailwindcss": "^3.2.4" }, "dependencies": { "flowbite": "^1.5.5" }

and this is my tailwind config ` /* @type {import('tailwindcss').Config} /

module.exports = { content: [ "./components//*.{js,vue,ts}", "./layouts/*/.vue", "./pages//*.vue", "./plugins/*/.{js,ts}", "./nuxt.config.{js,ts}", "./app.vue", ], theme: { extend: {}, }, plugins: [ require('flowbite/plugin') ], } `

and i created plugins/flowbite.client.ts with `import flowbite from 'flowbite/src/flowbite';

export default defineNuxtPlugin((nuxtApp) => { nuxtApp.vueApp.component(flowbite) });`

but i do not get flowbite styling at all. can you tell me what i am missing ? see image for refrence. https://i.imgur.com/ViqRHfA.png I do not get any errors in console or npm run dev.

RayGuo-ergou commented 1 year ago

Development mode works but I get an error when building

file: /app/plugins/flowbite.client.ts:1:0
1: import flowbite from 'flowbite';
   ^
2: 
3: export default defineNuxtPlugin((nuxtApp) => {

 ERROR  'default' is not exported by node_modules/flowbite/dist/flowbite.js, imported by plugins/flowbite.client.ts                                                 09:47:17

  at error (node_modules/rollup/dist/shared/rollup.js:198:30)
  at Module.error (node_modules/rollup/dist/shared/rollup.js:12537:16)
  at Module.traceVariable (node_modules/rollup/dist/shared/rollup.js:12896:29)
  at ModuleScope.findVariable (node_modules/rollup/dist/shared/rollup.js:11525:39)
  at ReturnValueScope.findVariable (node_modules/rollup/dist/shared/rollup.js:6492:38)
  at ChildScope.findVariable (node_modules/rollup/dist/shared/rollup.js:6492:38)
  at Identifier.bind (node_modules/rollup/dist/shared/rollup.js:7784:40)
  at CallExpression.bind (node_modules/rollup/dist/shared/rollup.js:5353:31)
  at CallExpression.bind (node_modules/rollup/dist/shared/rollup.js:8966:15)
  at ExpressionStatement.bind (node_modules/rollup/dist/shared/rollup.js:5357:23)```

Im currently having the same issue

None of the above solutions worked for my project, I'm using version 3.0.0 of nuxt and ^1.5.4 of flowbite.

However, I was curious and went to analyze the difference in package versions and realized that flowbite changed the export structure of the main file. Based on that, I changed the flowbite.client.ts file to the following:

import flowbite from 'flowbite/src/flowbite';

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component(flowbite)
});

And it worked for me!

Thanks, this also works for me. However, there seems to be a new issue that the flowbite javascript files would not be downloaded when changing route. I have to refresh the page to make the component work. For now, I just added external to true in <NuxtLink>as a workaround.

I think I will not use flowbite with Nuxt in my future project unless they have official support.

RayGuo-ergou commented 1 year ago

@pedrohavay

i am on node 18.12.0

and this is my package.json "devDependencies": { "autoprefixer": "^10.4.13", "nuxt": "3.0.0", "postcss": "^8.4.20", "tailwindcss": "^3.2.4" }, "dependencies": { "flowbite": "^1.5.5" }

and this is my tailwind config ` /* @type {import('tailwindcss').Config} /

module.exports = { content: [ "./components/*/.{js,vue,ts}", "./layouts//_.vue", "./pages//_.vue", "./plugins/*/.{js,ts}", "./nuxt.config.{js,ts}", "./app.vue", ], theme: { extend: {}, }, plugins: [ require('flowbite/plugin') ], } `

and i created plugins/flowbite.client.ts with `import flowbite from 'flowbite/src/flowbite';

export default defineNuxtPlugin((nuxtApp) => { nuxtApp.vueApp.component(flowbite) });`

but i do not get flowbite styling at all. can you tell me what i am missing ? see image for refrence. https://i.imgur.com/ViqRHfA.png I do not get any errors in console or npm run dev.

Try to add this in your tailwind config file.

module.exports = {
 content: [
    ...
    './node_modules/flowbite/**/*.js',
  ],
}

zoltanszogyenyi commented 1 year ago

This has been fixed in the Flowbite v1.6.1 release.

Now we have an official Tailwind + Nuxt.js + Flowbite integration guide and even a starter repo that you can check out.

dosstx commented 1 year ago

Thank you for making this Nuxt3 integration and ALSO for documenting it in the docs. Just because of that, I am going to strongly consider purchasing a PRO version.

Question: There are two ways we can use Flowbite components in Nuxt3: 1.) Simply use data attributes in the HTML elements and then import initModals (ie, example) in onMounted() 2.) Use each component's JavaScript object

Assuming my understanding is correct (btw, same thing as Bootstrap -- can use both data attributes or javascript objects)

dosstx commented 1 year ago

Hi guys, anyone have this working with latest Nuxt version 3.1.1? I have to revert back to 3.0.0 to get it to work but then now I"m not able to use nuxt-img module.

RayGuo-ergou commented 1 year ago

i

Works fine for me( Nuxt 3.1.1 + flowbite 1.6.3), but I am not using <nuxt-img />. Maybe use url or public folder?

dosstx commented 1 year ago

I got it working thx

lucas-montes commented 1 year ago

Can we initialize flowbite on our app.vue or should we do it component by component?

`import { initFlowbite } from 'flowbite'

onMounted(() => { initFlowbite(); })`

jt3432 commented 10 months ago

Having the same issues as report above. Current Nuxt integration instruction do not completely work. I had to add plugins/flowbite.client.ts (VS Code complains about this and does not like the Flowbite import, but still runs once you make some of the suggested updates above) to get any of the data attributes to work (some still do not). Navigating to a page also does not seem to load the Flowbite JS, so attributes stop working, have to hard refresh. No sure if I am doing something wrong or Flowbite components that require JS just do not work in Nuxt.

Nuxt: 3.8.2 Flowbite: 2.2.1

NeekoDev commented 7 months ago

Having the same issues as report above. Current Nuxt integration instruction do not completely work. I had to add plugins/flowbite.client.ts (VS Code complains about this and does not like the Flowbite import, but still runs once you make some of the suggested updates above) to get any of the data attributes to work (some still do not). Navigating to a page also does not seem to load the Flowbite JS, so attributes stop working, have to hard refresh. No sure if I am doing something wrong or Flowbite components that require JS just do not work in Nuxt.

Nuxt: 3.8.2 Flowbite: 2.2.1

Actually same problem, have to init flowbite component on [...slug].vue for example, or making hard refresh.

duboiss commented 7 months ago

Hey guys, I found something simple & working for me by DengSihan on stackoverflow.

plugins/flowbite.client.ts

import { initFlowbite } from 'flowbite';

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.mixin({
        mounted () {
            initFlowbite();
        }
    });
});

Nuxt: 3.9.3 Flowbite: 2.2.1 Original post : https://stackoverflow.com/a/77695262

Would be nice to have an official documentation on the flowbite side so that we are harmonized in a “clean” way

imphunq commented 2 months ago

@duboiss its works but when I console.log in this plugin, it runs many times. Are you experiencing the same issue?

joopert commented 1 month ago

@imphunq This seems to work

plugins/flowbite.client.ts

import { initFlowbite } from "flowbite";

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.hook("app:mounted", () => {
    initFlowbite();
    console.log("Flowbite initialized");
  });
});

themesberg / flowbite

How to set up Flowbite in NUXT js #131