Nuxt•5mo ago

Load composable on-demand

Hello everyone, Some of my composables use a bunch of dependencies and to alleviate the dependencies required at startup I want to load the composables in question on demand only. That's why I've set this up (please see code below). Before I wasn't using nuxtApp.runWithContext (please see code), but was getting lots of errors about the nuxt instance not being available. Do you see any problems with the way we do things? Do you know of an easier and/or more effective way? Thanks in advance 🙏🏽

// app/shared/ui/composables/abc/useAbcManager

export const useAbcManager = () => {
  return {
    "method1": () => {},
    "method2": () => {},
  }
};

// app/shared/ui/composables/abc/useAbcManager

export const useAbcManager = () => {
  return {
    "method1": () => {},
    "method2": () => {},
  }
};

// app/shared/ui/composables/abc/useAbcManagerLoader

/**
 * I allow to load the composable on-demand only
 */
export const useAbcManagerLoader = async () => {
  return (
    await import("~/app/shared/ui/composables/abc/useAbcManager")
  ).useAbcManager();
};

// app/shared/ui/composables/abc/useAbcManagerLoader

/**
 * I allow to load the composable on-demand only
 */
export const useAbcManagerLoader = async () => {
  return (
    await import("~/app/shared/ui/composables/abc/useAbcManager")
  ).useAbcManager();
};

// app/pages/index.vue

<script setup lang="ts">
const method1 = async () =>
  await nuxtApp.runWithContext(
    async () => (await useAbcManagerLoader()).method1,
  );
</script>

// app/pages/index.vue

<script setup lang="ts">
const method1 = async () =>
  await nuxtApp.runWithContext(
    async () => (await useAbcManagerLoader()).method1,
  );
</script>

5 Replies

manniL•5mo ago

Some of my composables use a bunch of dependencies and to alleviate the dependencies required at startup I want to load the composables in question on demand only.

They should be already code-split by pages "where needed" though (same for the used dependencies) 🤔

carpediemOP•5mo ago

This is the case. But the composable is loaded when the page loaded instead of when needed (eg. when clicking on Wallet button), hence the need to load the composable on demand. Am I clear? 😕 Like a LazyComponent... but for composable.

manniL•5mo ago

Ah I see! But then you could encapsulate it in a component and make that one lazy

carpediemOP•5mo ago

This is indeed already the case, but I don't think it's possible to encapsulate all heavy composables in components. The code above seems to work well and does what I'm looking for... I hope it won't have any undesirable side effects. And I don't really see the point of composables if they have to be encapsulated in components to be used "on demand" I'm afraid that encapsulating this kind of logic in components will make my application even heavier 😅 My app is a Portfolio, Wallet and Blockchain Explorer, so 3 app in one 😬 and therefore dependent on many different libraries for many different actions that can be executed only under certain conditions, on the client side

manniL•5mo ago

fair point 😄

Gaming

Programming

Load composable on-demand