themesberg / flowbite

Open-source UI component library and front-end development framework based on Tailwind CSS
https://flowbite.com
MIT License
7.31k stars 710 forks source link

Nuxt2: Cannot find module 'flowbite' from '/app' #755

Closed BorisKamp closed 5 days ago

BorisKamp commented 6 months ago

Hi! Im running "nuxt": "2.17.0" and "flowbite": "^2.2.0".

I've setup flowbite in my tailwind config file:

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: 'class',
  content: ['./components/**/*.{js,vue,ts}', './layouts/**/*.vue', './pages/**/*.vue', './plugins/**/*.{js,ts}', './nuxt.config.{js,ts}', './node_modules/flowbite/**/*.{js,ts}'],
 .......
      pattern: /(text|bg)-(red|green|blue|yellow)-(500)/,
    },
  ],
  plugins: [require('flowbite/plugin'), require('@tailwindcss/forms')],
}

And in my component I have the following code:

<template>
  <div>
    <button :id="`${name}Button`" :data-dropdown-toggle="name" class="group flex items-center">
      <font-awesome-icon :icon="['fas', faClass]" class="text-xl ps-3 pe-1 text-blue-500 duration-300 group-hover:scale-110 group-hover:text-blue-600" />
    </button>
    <div :id="name" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-60 dark:bg-gray-700 dark:divide-gray-600">
      <ul class="py-2 text-sm text-gray-700 dark:text-gray-200" :aria-labelledby="`${name}Button`">
        <slot />
      </ul>
    </div>
  </div>
</template>

<script>
import { initDropdowns } from 'flowbite'
export default {
  props: {
    name: {
      type: String,
      required: true,
    },
    faClass: {
      type: String,
      default: 'ellipsis-vertical',
    },
  },

  mounted() {
    initDropdowns()
  },
}
</script>

This all works great when I run the project locally, everything works as expected.

When I release the project to production however, I get a nuxt server error: https://birdblocker-bv.sentry.io/share/issue/7409d0ec65d14b428d807d9886e8d578/

Does anybody know how I can solve this?

zoltanszogyenyi commented 5 days ago

Hey @BorisKamp,

Please check our upgraded Nuxt guide and starter repo:

https://flowbite.com/docs/getting-started/nuxt-js/#data-attributes

Cheers, Zoltan