Carousel not working after update

[WilcoSchoolderman]

Carousel is not working anymore after the last update.

[smolenski-mikolaj]

@WilcoSchoolderman we changed the way JS files are distributed. Please check the docs: https://tailwind-elements.com/docs/standard/getting-started/quick-start/

[gobnat]

I am having the same issue with Accordians (Collapse) after the update and after following your documentation for an ES install. (vue3 with vue-cli and yarn)

Is there some other step not in the documentation? I am trying to follow the NPM install pattern for ES (Though I am using Yarn). Do I need to uninstall and re-install tw-elements?

There are no errors. The elements are just not working.

Additionally. this config:

module.exports = {
  content: [
    "./src/**/*.{html,js}",
    "./node_modules/tw-elements/dist/js/**/*.js"
  ],
  plugins: [require("tw-elements/dist/plugin.cjs")],
  darkMode: "class"
};

Is this suppose to completely replace my current config?

I currently have this line in content: './src/**/*.{vue,js,ts,jsx,tsx}' if I replace tha with your new file pattern my tailwind install breaks.

[LuxsSoft]

Same here. accordions not opening anymore since the update. No error thrown though @smolenski-mikolaj it's not an issue with the js link reference. i updated this but it has the same error. Does it have to do with the format changes? Do i have to incorporate something with initTE now?

[LuxsSoft]

Ok got it finally running again with this https://tailwind-elements.com/docs/standard/integrations/nuxt-integration/ What is the reasoning for this required change?

[LuxsSoft]

Hmm well no still not working reliably. I have it like this. https://tailwind-elements.com/docs/standard/integrations/nuxt-integration/ Sometime it works to expand the accordions sometimes not... Any ideas would be much appreciated! When it fails to expand this shows up in the console:

entry.js:47 [Vue warn]: Component is missing template or render function. at <TailwindElements> at <ClientOnly> at <App key=2 > at <NuxtRoot>

So something goes wrong with that method of initializing every now and then

[gobnat]

I've downgraded to version 1.0.0-alpha13 of tw-elements for now. At least until I can firgure out what's going on.

[LuxsSoft]

Ok i think i found the cause. In nuxt3, if you load data with useLazyAsyncData and option server:false the tw-elements seem not to initialize. A temporary fix for now was that i place this section which should only be once on the top level in app.vue in every template render block v-if="!pendingData" where the actuall component come in play after showing a loader. Honestly missing the old days when simple head links to css and js worked everywhere without weird setups.

`ClientOnly>

`

[smolenski-mikolaj]

@gobnat how about using <ClientOnly> component as a wrapper as described in the tutorial?

[gobnat]

@gobnat how about using <ClientOnly> component as a wrapper as described in the tutorial?

Doesn't seem to be. I am not using Nuxt3 though. Just vanilla vue3 and vue-cli. Does ClientOnly work for vue-cli out of the box?

I have tried working through most of the "integration" section for vue in the docs as well. No luck so far.

I am using caching on the components via KeepAlive and all affected components involve loading data from an axios async call to an external REST api.

It is not just Collapse elements I realize, but anything tw related failing. so even the "ticks" on select boxes are broken.

Do I need to be taking special steps when loading async data?