<!-- <input @input="()=> $emit('update:modelValue',!modelValue)"/> -->
<!-- defineEmits(['update:modelValue']) -->
<!-- :model-value="isLessonComplete" -->
<!-- @update:model-value="throw createError('could not update')" -->
<!-- <NuxtErrorBoundary>
<NuxtPage/>
<template #error="{error}">
<p>
oh no, something broke!
<code>
{{ error }}
</code>
</p>
</template>
</NuxtErrorBoundary>

const resetError = async (error) =>{
    throw createError({
        fatal:true,
        message: 'fatal error'
    })
} -->

nuxt(nitro(h3))

h3:
1.is responsible for http request
2.minimal http framework used internally by nitro.
3.extended by creating composable-like utitlities.
4.built-i utilities used directly in nuxt event handlers.
5.fast and tree shake-able replacement for Express.
readBody
getQuery
setCookie

nitro :
1.use h3 internally and layers on a tons of extra functionaliy.
2.universal js server
3.rendering ssr\static\etc
4.supports multiple hosting providers.
5.builds standalone server so deploys don't require any extra code.
6.automatic code-splitting
7.storage layer to access filesystem,database, redis and more.
8.caching system built on top of the storage layer.
such as : file base routing, bundling

nuxt : use nitro to provide the backend for our app.

unjs
1.a set of packages designed to work together and make building universal javascript applications.
2.includes nitro and h3
3.nuxt and nitro use unjs/hookable for their hook systems.
4.many more very useful packages, includeing $fetch.

disable and hide body scroll when modal opend.
mounted(){  
previousOverflow = document.body.style.overflow;
document.body.style.overflow = 'hidden';
}

onBeforeDestroy(){
document.body.style.overflow = previousOverflow;
}

<script setup lang="ts">
// During SSR data is fetched twice, once on the server and once on the client.
const dataTwice = await $fetch('/api/item')

// During SSR data is fetched only on the server side and transferred to the client.
const { data } = await useAsyncData('item', () => $fetch('/api/item'))

// You can also useFetch as shortcut of useAsyncData + $fetch
const { data } = await useFetch('/api/item')
</script>

    $fetch is the simplest way to make a network request.
    useFetch is wrapper around $fetch that fetches data only once in universal rendering.
    useAsyncData is similar to useFetch but offers more fine-grained control.


runtime config:
after our application already been built, and you are running it, there are definite things that might be changes.
1.define in nuxt.config.ts with runtimeConfig key.
2.reactive
3.specified after build.
4.secrest, tokens, and other environment variables.
5.supabase keys, prisma keys.

app config:
every thing else
1.defined in app.config.ts
2.reactive
3.specified at build time.
4.project config, theme, anything not sensitive, change per request.
5.full typescript support.
6.dark mode vs light mode.



import { useSearchStore } from "#imports":
from "#imports": This indicates that the import is coming from a special alias or a module resolver named #imports. In Nuxt.js, for example, #imports can be used to import composables or other utilities that are set up in the project.