How to install Tailwind Elements with nuxtjs3?

Question

I'm trying to install Tailwind Elements UI with for my nuxt 3 project, I did install everything like the document stated, to the step 4. Dynamic components will work after adding the js file:

or import * as te from 'tw-elements';

So i tried, to import it thourgh plugins[] in nuxt.config.ts. Then i got this error.

The requested module '/_nuxt/plugins/tailwind-elements.js?t=1679733707942' does not provide an export named 'default'

export default defineNuxtConfig({
    css: ['~/assets/css/main.css'],
    postcss: {
        plugins: {
          tailwindcss: {},
          autoprefixer: {},
        },
    },
    plugins: [
        {src: '~/node_modules/tw-elements', mode: 'client'},
    ],
});

What is the correct way to install it?

I tryied to add the /node_modules/tw-elements to nuxt.config plugins. but got error export

Answer 1

The error happens with the tw-elements not have a default export.

to solve this, try create a custom plugin and import the tw-elements there

try this and use in yout nuxt app

example to plugins/tailwind-elements.js
import * as te from 'tw-elements';

and in nuxt app

plugins: [
    { src: '~/plugins/tailwind-elements.js', mode: 'client' },
  ],