Need some help to setup tw elements with nuxt 3 and tailwindcss module

[Vitalii-Kh95]

Hi guys. I know there is a nuxt integration section in the docs. But my pre-configuration is little different as I use nuxt module to add tailwind to my project. And therefore I can't strictly follow fore-mentioned instructions. Right now I am having an Error "500 document is not defined". Hope for your help. Details bellow:

Error message:

at  (C:\Users\Admin\Desktop\PROJECTS\learning\my-blog-nuxt\my_nuxtjs_blog\src\tw-elements\js\free\components\dropdown.js:54:25)
at /C:/Users/Admin/Desktop/PROJECTS/learning/my-blog-nuxt/my_nuxtjs_blog/node_modules/tw-elements/js/tw-elements.umd.min.js:1:175
at /C:/Users/Admin/Desktop/PROJECTS/learning/my-blog-nuxt/my_nuxtjs_blog/node_modules/tw-elements/js/tw-elements.umd.min.js:1:189
at ModuleJob.run (node:internal/modules/esm/module_job:218:25)
at async ModuleLoader.import (node:internal/modules/esm/loader:323:24)
at async ViteNodeRunner.interopedImport (/C:/Users/Admin/Desktop/PROJECTS/learning/my-blog-nuxt/my_nuxtjs_blog/node_modules/vite-node/dist/client.mjs:383:28)
at async ViteNodeRunner.directRequest (/C:/Users/Admin/Desktop/PROJECTS/learning/my-blog-nuxt/my_nuxtjs_blog/node_modules/vite-node/dist/client.mjs:253:24)
at async ViteNodeRunner.cachedRequest (/C:/Users/Admin/Desktop/PROJECTS/learning/my-blog-nuxt/my_nuxtjs_blog/node_modules/vite-node/dist/client.mjs:189:14)
at async ViteNodeRunner.dependencyRequest (/C:/Users/Admin/Desktop/PROJECTS/learning/my-blog-nuxt/my_nuxtjs_blog/node_modules/vite-node/dist/client.mjs:233:12)

nuxt.config.ts

export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: [
    '@vee-validate/nuxt',
    '@sidebase/nuxt-auth',
    '@nuxtjs/tailwindcss',
  ],
  tailwindcss: {
    exposeConfig: true,
    viewer: true,
    editorSupport: true,
  },
  auth: {
    ...
  },
  veeValidate: {
    ...
  },
  css: [
    "~/assets/css/main.css"
  ]
})

tailwind.config.js

export default {
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./nuxt.config.{js,ts}",
    "./app.vue",
    "./node_modules/tw-elements/js/**/*.js",
  ],
  theme: {
    extend: {},
  },
  darkMode: "class",
  plugins: [require("tw-elements/plugin.cjs")],
}

Carousel.vue

<template>
here's a basic carousel from examples.
</template>
<script setup>
import {
  Carousel,
  initTWE,
} from "tw-elements";

initTWE({ Carousel });
</script>

[iprzybysz]

Hi @Vitalii-Kh95 try importing Carousel component dynamically. Check out our Nuxt Troubleshooting section for more details.