<script>
// Lazy loading: prepend Lazy to the component name.
// Imports come from #components (usually it's an auto import though)
// Auto import from npm package
/* import { addComponent, defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  setup() {
    // import { MyComponent as MyAutoImportedComponent } from 'my-npm-package'
    addComponent({
      name: 'MyAutoImportedComponent',
      export: 'MyComponent',
      filePath: 'my-npm-package',
    })
  },
}) */
// Client components: Component.client.vue
// .client components are rendered only after being mounted
// To access the rendered template using onMounted(), add await nextTick() in the callback of the onMounted() hook.
// <ClientOnly></ClientOnly>
// Use slot as fallback until clientonly is mounted:
/* <template>
  <div>
    <Sidebar />
    <!-- This renders the "span" element on the server side -->
    <ClientOnly fallbackTag="span">
      <!-- this component will only be rendered on client side -->
      <Comments />
      <template #fallback>
        <!-- this will be rendered on server side -->
        <p>Loading comments...</p>
      </template>
    </ClientOnly>
  </div>
</template> */
// <DevOnly></DevOnly>
/*  <DevOnly>
      <!-- this component will only be rendered during development -->
      <LazyDebugBar />

      <!-- if you ever require to have a replacement during production -->
      <!-- be sure to test these using `nuxt preview` -->
      <template #fallback>
        <div><!-- empty div for flex.justify-between --></div>
      </template>
    </DevOnly> */
// <NuxtClientFallback></NuxtClientFallback> component to render its content on the client if any of its children trigger an error in SSR.
// You can specify a fallbackTag to make it render a specific tag if it fails to render on the server.
/* <template>
  <div>
    <Sidebar />
    <!-- this component will be rendered on client-side -->
    <NuxtClientFallback fallback-tag="span">
      <Comments />
      <BrokeInSSR />
    </NuxtClientFallback>
  </div>
</template> */
// Then in awesome-ui/nuxt.js you can use the components:dirs hook:
/* import { defineNuxtModule, createResolver } from '@nuxt/kit'

export default defineNuxtModule({
  hooks: {
    'components:dirs': (dirs) => {
      const { resolve } = createResolver(import.meta.url)
      // Add ./components dir to the list
      dirs.push({
        path: resolve('./components'),
        prefix: 'awesome'
      })
    }
  }
}) */
/* export default defineNuxtConfig({
  modules: ['awesome-ui/nuxt']
}) */
// Catch-all route using <ContentDoc> component
/*
<template>
  <main>
    <ContentDoc :path="$route.path" />
  </main>
</template>
 */
</script>

<template>
  <main></main>
  <ECMAPortal directory="/images/portal" animate randomize fade />
</template>
