101 lines
3.1 KiB
Markdown
101 lines
3.1 KiB
Markdown
|
<!-- <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.
|