How to check if a composable exists ?

ManUtopiK · 2024-04-25T07:10:53.775Z

I want to check if a composable exists in a component. With `import { myComposable } from '#imports'`, importing the composable throw an error and break nuxt if the composable doesn't exist.

D

Dragofafmir•4/25/24, 7:21 AM

Did you try to try catch an

const { myComposable } = await import('./path/to/myComposable')

const { myComposable } = await import('./path/to/myComposable')

const { myComposable } = await import('./path/to/myComposable')

const { myComposable } = await import('./path/to/myComposable'), try to use it or catch it ?

D

Dragofafmir•4/25/24, 7:22 AM

Something like this

<script setup lang="ts">
const composableLoaded = ref(false)

const loadMyComposable = async () => {
  try {
    const { myComposable } = await import('./path/to/myComposable')
    myComposable()
    composableLoaded.value = true
  } catch (error) {
    console.error("...", error)
    composableLoaded.value = false
  }
}

onMounted(() => {
  loadMyComposable()
})
</script>

<script setup lang="ts">
const composableLoaded = ref(false)

const loadMyComposable = async () => {
  try {
    const { myComposable } = await import('./path/to/myComposable')
    myComposable()
    composableLoaded.value = true
  } catch (error) {
    console.error("...", error)
    composableLoaded.value = false
  }
}

onMounted(() => {
  loadMyComposable()
})
</script>

<script setup lang="ts">
const composableLoaded = ref(false)

const loadMyComposable = async () => {
  try {
    const { myComposable } = await import('./path/to/myComposable')
    myComposable()
    composableLoaded.value = true
  } catch (error) {
    console.error("...", error)
    composableLoaded.value = false
  }
}

onMounted(() => {
  loadMyComposable()
})
</script>

<script setup lang="ts">
const composableLoaded = ref(false)

const loadMyComposable = async () => {
  try {
    const { myComposable } = await import('./path/to/myComposable')
    myComposable()
    composableLoaded.value = true
  } catch (error) {
    console.error("...", error)
    composableLoaded.value = false
  }
}

onMounted(() => {
  loadMyComposable()
})
</script>

M

ManUtopiKOP•6/5/24, 8:41 PM

I reply a long time ago. First, thank you for your response. It looks fine but can serve my purpose.

In fact, I use nuxt layers. I want to check in a component of a layer if the composable exists. So, I can't rely on

path/to/myComposable

path/to/myComposable

path/to/myComposable

path/to/myComposable because the composable is outside the package.
Using

const { myComposable } = await import('#imports')

const { myComposable } = await import('#imports')

const { myComposable } = await import('#imports')

const { myComposable } = await import('#imports') break nuxt build if the composable doesn't exist.
Any other idea to do that ?

H

handshake•6/5/24, 10:17 PM

I'm just curious, but in what situation would this happen? If you're expecting to use a composable, didn't you create it already?

M

ManUtopiKOP•6/6/24, 11:15 PM

I have a layer with some components shared between two apps. I want the behaviour of the components to be different on one app and use a composable if it presents.

M

ManUtopiKOP•6/7/24, 1:39 PM

Another use case I have for this.
I want to release a library and make it open source. This library contains several components with some text and I want to provide translation with i18n.
How to check in my components if i18n composable is here and translate text ? Or provide default EN text if there's no i18n composable ?
Of course, I don't want to ship i18n in my library.

O

Orbis•6/7/24, 11:00 PM

@ManUtopiK you can maybe use a Provider component to wrap your App and provide and inject your config

OOrbis @ManUtopiK you can maybe use a Provider component to wrap your App and provide a...

M

ManUtopiKOP•6/8/24, 11:10 AM

Ah yes. Thanks for your tip. I will take a try...

How to check if a composable exists ?

Similar Threads