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; } $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.