Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to set up Flowbite in NUXT js #131

Closed
siumhossain opened this issue Apr 11, 2022 · 34 comments
Closed

How to set up Flowbite in NUXT js #131

siumhossain opened this issue Apr 11, 2022 · 34 comments
Assignees
Labels
bug Something isn't working documentation Improvements or additions to documentation v1.6.3 Issues and tasks for v1.6.3 release

Comments

@siumhossain
Copy link

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
Copy link

kissu commented Apr 11, 2022

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
Copy link

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
Copy link

kissu commented Apr 25, 2022

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

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

@oripka
Copy link

oripka commented May 6, 2022

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
Copy link

Supernectar commented May 16, 2022

@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
Copy link

Development mode works but I get an error when building

Has anyone managed to get this working?

@jpoechill
Copy link

jpoechill commented May 20, 2022

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
Copy link

dxxta commented May 31, 2022

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
Copy link

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
Copy link
Contributor

alorence commented Jul 2, 2022

@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
Copy link
Member

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.

@zoltanszogyenyi zoltanszogyenyi added the bug Something isn't working label Jul 6, 2022
@zoltanszogyenyi zoltanszogyenyi self-assigned this Jul 6, 2022
@mohammadmrd74
Copy link

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

@jpoechill
Copy link

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
Copy link

vinksz commented Sep 15, 2022

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
Copy link

dimunyo commented Sep 28, 2022

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
Copy link

Daedra22 commented Oct 1, 2022

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
Copy link

IvanGodinez21 commented Oct 30, 2022

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
Copy link

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 #131 (comment), 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?

Screen.Recording.2022-11-04.at.4.59.31.PM.mov

@dimunyo
Copy link

dimunyo commented Nov 17, 2022

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
Copy link

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!

@zoltanszogyenyi zoltanszogyenyi added documentation Improvements or additions to documentation v1.6.3 Issues and tasks for v1.6.3 release labels Dec 7, 2022
@hardikdangar
Copy link

hardikdangar commented Dec 12, 2022

@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
Copy link

RayGuo-ergou commented Jan 1, 2023

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
Copy link

@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
Copy link
Member

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
Copy link

dosstx commented Jan 31, 2023

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
Copy link

dosstx commented Jan 31, 2023

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
Copy link

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
Copy link

dosstx commented Feb 5, 2023

I got it working thx

@lucas-montes
Copy link

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

`import { initFlowbite } from 'flowbite'

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

@jt3432
Copy link

jt3432 commented Dec 20, 2023

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
Copy link

NeekoDev commented Apr 5, 2024

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
Copy link

duboiss commented Apr 10, 2024

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
Copy link

imphunq commented Sep 10, 2024

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

@joopert
Copy link

joopert commented Sep 13, 2024

@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");
  });
});

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working documentation Improvements or additions to documentation v1.6.3 Issues and tasks for v1.6.3 release
Projects
Development

No branches or pull requests