Lazy loading components

[dbzx10299]

If we want to lazy load a component does this lazy load child components as well or do we have to add the Lazy keyword to all child components?

For example

<script setup>
const showModal = ref(false)
</script>

<template>
  <ClientOnly>
    <Teleport to="body">
      <LazyModal v-if="showModal">
        <!-- is <Cart /> lazy loaded as well? -->
        <Cart />

        <!-- or does this require Lazy also? -->
        <LazyCart />
      </LazyModal>
    </Teleport>
  </ClientOnly>
</template>

[hecktarzuli]

If have have Component2 inside Component 1, then yes it will be included in the Component 1 bundle and lazy loaded.

If you have Component2 passed into the slot of Component1 (which you seem to be doing above) then no. If you're using slots, then you'd put 'Lazy' in front of Cart and it would be bundled into it's own separate file and lazy loaded.

You can play with this all yourself just as I did by making 2 components with distinct text in them and then building your project an inspecting the JS contents via the Network Tab in your browser (and then search)

In chrome, it's cmd+f on a mac while in the network tab in devtools.