Nuxt
https://scrapbox.io/files/67047d234f6891001de21b04.png
コンポーネントも自動インポート
パスからコンポーネント名が決まる
ユニバーサルレンダリングでは、サーバーが完全にレンダリングされた HTML を返します。
これにより、ユーザーはアプリケーションのコンテンツをすぐに取得することができます。
Incremental Static Regeneration の略
メリデメがあって、トレードオフ。
useState()
server/
code:markdown
-| server/
---| api/
-----| hello.ts # /api/hello
---| routes/
-----| bonjour.ts # /bonjour
---| middleware/
-----| log.ts # log all requests
code:server/api/hello.ts
export default defineEventHandler((event) => {
return {
hello: 'world'
}
})
JSON, Promise, event.node.res.end() のいずれかを返すハンドラをエクスポートする
Server Middleware
Nuxt will automatically read in any files in the ~/server/middleware to create server middleware for your project.
Data fetching
Nuxt comes with two composables and a built-in library to perform data-fetching in broweser or server environments: useFetch(), useAsyncData(), and $fetch.
In a nutshell:
$fetch is the simplest way to make a network request.
useFech() is wrapper around $fetch() that fetches data only once in universal rendering.
useAsyncData() is similar to useFetch() but offers more fine-grained control.
useNuxtApp()
useNuxtApp is a built-in composable that provides a way to access shared runtime context of Nuxt, also known as the Nuxt context, which is available on both client and server side (but not within Nitro routes). It helps you access the Vue app instance, runtime hooks, runtime config variables and internal states, such as ssrContext and payload.