Nuxt 3 완벽 마스터 복습 항목

 

0. 아래 코드는 왜 내가 생각한 대로 작동하지 않을까 ?

watchEffect(() => {
  const { data } = useAsyncData("fetch1", () =>
    $fetch("https://jsonplaceholder.typicode.com/posts", {
      params: {
        page: id.value,
      },
    })
  );
 
  console.log(data);
  console.log(id);
});

 

1. auto-imports

 

2. 페이지 이동 이벤트

=> script에 라우터 이동 함수를 만들어서 click 이벤트로 거는 것 보다, <NuxtLink>로 감싸서 이동 이벤트를 거는 것이 SEO 최적화에 유리하다.

 

3. Nuxt alias

https://nuxt.com/docs/api/nuxt-config#alias

Nuxt Configuration

 

4. 컴포지션API와 TS

https://v3-docs.vuejs-korea.org/guide/typescript/composition-api.html#typing-component-emits

Composition API와 타입스크립트 | Vue.js

 

5. NuxtPage

https://nuxt.com/docs/api/components/nuxt-page

<NuxtPage> · Nuxt Components

 

Nuxt의 진입점: app.vue

내장 컴포넌트인 NuxtLayout은 layouts/default.vue

default.vue의 <slot />부분에 내장 컴포넌트인 NuxtPage가 들어간다.

이 NuxtPage는 pages 하위에 있는 페이지들을 렌더링하는 컴포넌트이며 기본값으로 pages/index.vue를 가리키며,

NuxtPage는 NuxtRouter가 감싸고 있다.

 

6. definePageMeta

https://nuxt.com/docs/api/utils/define-page-meta

definePageMeta · Nuxt Utils

option의 key는 리렌더링을 결정하는 조건.

definePageMeta는 컴포넌트 내에서 참조, 사용할 수 없다. 컴파일할 때 밖으로 끌어올려짐.

 

7. 중첩라우팅

https://nuxt.com/docs/guide/directory-structure/pages#nested-routes

부모 컴포넌트에서 <NuxtPage />를 쓰면 자식 컴포넌트(부모 컴포넌트 명과 동일한 디렉토리의 하위 페이지)가 그 위치에 렌더링 되며 default로는 index.vue를 찾는다.

 

8. NuxtLink

https://nuxt.com/docs/api/components/nuxt-link

<NuxtLink> · Nuxt Components

- prefetching

 

9. 레이아웃 구성

- definePageMeta의 layout 옵션에 설정해도 되고 setPageLayout()도 가능.

layout 타입은 LayoutKey라는 내장 type을 사용할 수 있다.

 

10. <script lang="ts">에서의 export 필수에 관해.

 

즉, <script lang="ts" setup>으로 setup을 추가해서 setup함수로 만들거나,

script 내부에 export default {}; 를 추가해서 export 해줘야 한다.