Nuxt3 import component globally

[Ischafak]

Hi, is it possible to install component globally in nuxt3. i am using nuxt 3.6.5 and latest version of twelements

const { Ripple, Modal, initTE } = await import("tw-elements") initTE({ Ripple, Modal })

if i do something like this in component it works but i want to ask you this. i will use Ripple in a lot of component

if i write const { Ripple} = await import("tw-elements") in every component is it bad for performance or is it possible for me to install ripple globally

[juujisai]

Hi! Maybe try creating a new component that would receive a slot between an element with ripple? Something like that:

<template>
  <div data-te-ripple-init>
    <slot></slot>
  </div>
</template>

... and then try using it wherever you need.

[noelc10]

I tried to solve this issue via latest version of Nuxt 3; to import all components of tw-elements via plugins(like we've used to do in nuxt 2 on most 3rd party UI kits, packages, etc.) but sadly no luck. Its so tiring and making your OCD triggered when always declaring those needed components/functions from tw-elements every components who have a form fields/elements.

plugins/tw-elements.js (i also declare the plugin in nuxt.config.ts)

export default defineNuxtPlugin({
  name: 'tw-elements',
  enforce: 'pre', // or 'post'
  async setup (nuxtApp) {
    // this is the equivalent of a normal functional plugin
  },
  hooks: {
    // You can directly register Nuxt app hooks here
    async 'app:mounted'() {
      // const nuxtApp = useNuxtApp()
      const {
        Input,
        Ripple,
        initTE,
      } = await import("tw-elements")

      initTE({ Input, Ripple }, { allowReinits: true })
    }
  }
})

i tried this approach too but still no luck (same plugin file):

export default defineNuxtPlugin({
  hooks: {
    'app:mounted': async () => {
      const {
        Input,
        Ripple,
        initTE,
      } = await import("tw-elements")

      initTE({ Input, Ripple }, { allowReinits: true })
    }
  }
})

It would be nice if the creator found a way to implement this way if ever possible. Since I discovered this UI kit, everything seems so easy to put UI components to the app I've been working on, just like I've been using Vuetify, but sadly I thought my experience with this UI kit would be similar to Vuetify.

Hoping for a response from the creators on this great UI kit.

[Trochonovitz]

Hi, you are using a vanilla JS package for framework and sure, there will be struggles. We are recomending to create a custom component and initialize it via JavaScript, as I was said in example above. Ensure that proper routing integration.

[noelc10]

@Trochonovitz hello, thank you for your response. Can you able to provide some sample/s on initialization of the said codeblock via JavaScript? It would be a great guide to those of us that have no idea how to resolve the said problem.

Thanks.

[noelc10]

@iprzybysz hi, do you have an idea about this issue?

Thanks

[Trochonovitz]

@noelc10 try our integration tutorial: it should answer to all of you questions. :) https://tw-elements.com/docs/standard/integrations/nuxt-integration/

[noelc10]

@noelc10 try our integration tutorial: it should answer to all of you questions. :) https://tw-elements.com/docs/standard/integrations/nuxt-integration/

@Trochonovitz I already follow those tutorials and resolve the routing issue on my end. But regarding this issue about initializing/calling/importing all the needed components from TW-Elements in a plugin or in a one file only would be helpful so that we can declare those components in a single file and do direct creation of a desired component codebase from TW-Elements. Or something a proper coding pattern to understand and educate us on how to properly use the TW-Elements in a case-to-case basis is one of the helpful ways IMO.

Thanks.