91 lines
2.7 KiB
Vue
91 lines
2.7 KiB
Vue
<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>
|