컴포넌트 옵션

asyncData 및 fetch

Nuxt 3는 API에서 데이터 가져오기를 위한 새로운 옵션을 제공합니다.

아이소모픽 Fetch

Nuxt 2에서는 데이터를 가져오기 위해 @nuxtjs/axios 또는 @nuxt/http를 사용하거나, 폴리필된 전역 fetch를 사용할 수 있습니다.

Nuxt 3에서는 Fetch API와 동일한 API를 가진 전역 fetch 메서드나 unjs/ofetch를 사용하는 $fetch 메서드를 사용할 수 있습니다. 여기에는 다음과 같은 여러 이점이 있습니다.

1. 서버에서 실행 중인 경우 직접 API 호출을 '스마트하게' 처리하거나, 클라이언트에서 실행 중인 경우 API에 대한 클라이언트 측 호출을 처리합니다. (서드파티 API 호출도 처리할 수 있습니다.)
2. 또한 응답을 자동으로 파싱하고 데이터를 문자열화하는 등의 편의 기능을 제공합니다.

직접 API 호출에 대한 자세한 내용 또는 데이터 가져오기에 대해 더 읽어볼 수 있습니다.

컴포저블

Nuxt 3는 데이터를 가져오기 위한 새로운 컴포저블인 useAsyncData와 useFetch를 제공합니다. 각각은 클라이언트 측 내비게이션을 차단하지 않는 'lazy' 변형(useLazyAsyncData 및 useLazyFetch)을 가지고 있습니다.

Nuxt 2에서는 다음과 유사한 문법을 사용하여 컴포넌트에서 데이터를 가져왔을 것입니다.

export default {
  async asyncData ({ params, $http }) {
    const post = await $http.$get(`https://api.nuxtjs.dev/posts/${params.id}`)
    return { post }
  },
  // 또는
  fetch () {
    this.post = await $http.$get(`https://api.nuxtjs.dev/posts/${params.id}`)
  },
}

메서드와 템플릿 내에서, 컴포넌트가 제공하는 다른 데이터와 마찬가지로 post 변수를 사용할 수 있었습니다.

Nuxt 3에서는 setup() 메서드나 <script setup> 태그 안에서 컴포저블을 사용해 이 데이터 가져오기를 수행할 수 있습니다.

<script setup lang="ts">
// `defineProps()`, `useRoute()` 등으로 어디에서든 params를 정의하세요.
const { data: post, refresh } = await useAsyncData('post', () => $fetch(`https://api.nuxtjs.dev/posts/${params.id}`))
// 또는 - useFetch는 단순한 fetch를 수행할 때 useAsyncData를 감싼 편의 래퍼입니다.
const { data: post, refresh } = await useFetch(`https://api.nuxtjs.dev/posts/${params.id}`)
</script>

이제 Nuxt 3 템플릿 안에서 post를 사용할 수 있고, refresh를 호출하여 데이터를 갱신할 수 있습니다.

마이그레이션

1. 페이지/컴포넌트에서 asyncData 훅을 useAsyncData 또는 useFetch로 교체합니다.
2. 컴포넌트에서 fetch 훅을 useAsyncData 또는 useFetch로 교체합니다.

head

key

이제 definePageMeta 컴파일러 매크로 안에서 key를 정의할 수 있습니다.

- <script>
- export default {
-   key: 'index'
-   // 또는 메서드
-   // key: route => route.fullPath
- }
+ <script setup>
+ definePageMeta({
+   key: 'index'
+   // 또는 메서드
+   // key: route => route.fullPath
+ })
</script>

layout

loading

이 기능은 아직 Nuxt 3에서 지원되지 않습니다.

middleware

scrollToTop

이 기능은 아직 Nuxt 3에서 지원되지 않습니다. vue-router의 기본 스크롤 동작을 덮어쓰고 싶다면, ~/router.options.ts에서 설정할 수 있습니다(자세한 내용은 문서 참고). key와 마찬가지로, definePageMeta 컴파일러 매크로 안에서 이를 지정하세요.

- <script>
- export default {
-   scrollToTop: false
- }
+ <script setup>
+ definePageMeta({
+   scrollToTop: false
+ })
</script>

transition

validate

Nuxt 3의 validate 훅은 Nuxt 2와 달리 route 하나의 인자만 받습니다. Nuxt 2와 마찬가지로, 불리언 값을 반환할 수 있습니다. false를 반환하고 다른 매치가 발견되지 않으면 404가 발생합니다. 또한 statusCode/statusMessage가 있는 객체를 직접 반환하여 즉시 에러로 응답할 수도 있습니다(이 경우 다른 매치는 확인되지 않습니다).

- <script>
- export default {
-   async validate({ params }) {
-     return /^\d+$/.test(params.id)
-   }
- }
+ <script setup>
+ definePageMeta({
+   validate: async (route) => {
+     const nuxtApp = useNuxtApp()
+     return /^\d+$/.test(route.params.id)
+   }
+ })
  </script>

watchQuery

이는 Nuxt 3에서 지원되지 않습니다. 대신, 워처를 직접 사용하여 데이터 재요청을 트리거할 수 있습니다.

<script setup lang="ts">
const route = useRoute()
const { data, refresh } = await useFetch('/api/user')
watch(() => route.query, () => refresh())
</script>