Unable to get Flowbite JS-dependent components working in Nuxt3

[jimmiejackson414]

I have a fairly new Nuxt3 project, and am trying to get some simple tooltips working. Even with copy-pasted components from the docs however, the JS doesn't seem to be loading correctly. I've followed the guide from the docs as well.

package.json:

{
  "name": "flowbite_test",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare",
    "typegen": "npx supabase gen types typescript --local public > ./types/index.ts && npx better-supabase-types -i ./types/index.ts -f -s",
    "cert": "mkcert -key-file ./localhost-key.pem -cert-file ./localhost.pem localhost"
  },
  "devDependencies": {
    "@kalimahapps/eslint-plugin-tailwind": "^1.0.10",
    "@nuxt/devtools": "latest",
    "@nuxtjs/supabase": "^1.1.4",
    "@nuxtjs/tailwindcss": "^6.10.1",
    "@tailwindcss/forms": "^0.5.7",
    "autoprefixer": "^10.4.16",
    "nuxt": "^3.8.2",
    "postcss": "^8.4.32",
    "tailwindcss": "^3.3.6",
    "typescript": "^5.3.3",
    "vue": "^3.3.10",
    "vue-router": "^4.2.5",
    "vue-tsc": "^1.8.25"
  },
  "dependencies": {
    "@pinia/nuxt": "^0.5.1",
    "flowbite": "^2.2.0",
    "pinia": "^2.1.7",
  }
}

nuxt.config.ts:

// https://nuxt.com/docs/api/configuration/nuxt-config
import fs from 'fs';

export default defineNuxtConfig({
  app: {
    layoutTransition: { name: 'layout', mode: 'out-in' },
    pageTransition: { name: 'page', mode: 'out-in' },
  },

  devtools: { enabled: true },

  modules: [
    '@nuxtjs/supabase',
    '@pinia/nuxt',
    '@nuxtjs/tailwindcss',
  ],

  optimizeDeps: {
    include: ['tailwind.config.ts'],
  },

  postcss: {
    plugins: {
      'tailwindcss/nesting': {},
      tailwindcss: {},
      autoprefixer: {},
    },
  },

  typescript: {
    typeCheck: true,
  },
});

tailwind.config.ts

import defaultTheme from 'tailwindcss/defaultTheme';
import tailwindForms from '@tailwindcss/forms';
import flowbite from 'flowbite/plugin';
import type { Config } from 'tailwindcss';

export default {
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./nuxt.config.{js,ts}",
    "./node_modules/flowbite/**/*.{js,ts}",
  ],
  plugins: [
    flowbite,
    tailwindForms,
  ],
} satisfies Config;

And using something simple from the docs like this doesn't work:

<div
  id="tooltip-animation"
  class="absolute bg-gray-900 dark:bg-gray-700 duration-300 font-medium inline-block invisible opacity-0 px-3 py-2 rounded-lg shadow-sm text-sm text-white tooltip transition-opacity z-10"
  role="tooltip">
  Tooltip content
  <div
    class="tooltip-arrow"
    data-popper-arrow />
</div>

Has anyone run into issues like this before getting it to work with Nuxt3?

[jimmiejackson414]

I discovered that it was because I needed to import and use the initFlowbite() function onMounted. This begs another question though, as to whether this will be a required import on every single page and component that requires it, which would not be great DX. I'll post another discussion with regards to this.