NuxtJS__app, layout, pages, components, errorpage

Nuxt 프로젝트 생성

npx nuxi@latest init <project-name>

 

Nuxt 설치 후 
https://nuxt.com/docs/guide의 Directory Structure를 참고하여 자기가 필요한 기능들을 폴더로 만들고 해당파일을 만들면 그 기능이 활성화된다. 폴더를 만들땐 위의 링크에 나와있는데로 작성해야한다.

 

1.  app.vue

초기 파일에 app.vue파일에 내용을 다 지우고 작업을 시작하면된다.

• app.vue 관련 내용 (https://nuxt.com/docs/guide/directory-structure/app)

//app.vue

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

 

2.  Layouts

layouts 관련 내용 (https://nuxt.com/docs/guide/directory-structure/layouts)

레이아웃을 만들기 위해 Root에 layouts라는 폴더를 만들고 기본이 되는 레이아웃을 파일을 만든다.ㅓ

기본이 되는 파일명은 default.vue가 되어야 한다.

//default.vue
<template>
  <div>
    <HeaderComp />
    <h1>this is layout</h1>
    <NuxtPage />
    <FooterComp />
  </div>
</template>

 

커스텀 레이아웃은 커스텀명.vue로 만들어야하고

//pages/페이지이름.vue

<script setup lang="ts">
definePageMeta({
  layout: 'custom'
})
</script>

레이아웃을 불러내야한다.

 

직접 불러내어 전체 레이아웃을 바꿀 수도 있다.

//app.vue

<script setup lang="ts">
// You might choose this based on an API call or logged-in status
const layout = "custom";
</script>

<template>
  <NuxtLayout :name="layout">
    <NuxtPage />
  </NuxtLayout>
</template>

클릭이벤트를 주어 레이아웃을 바꿀 수 있다.

<script setup lang="ts">
function enableCustomLayout () {
  setPageLayout('custom')
}
definePageMeta({
  layout: false,
});
</script>

<template>
  <div>
    <button @click="enableCustomLayout">Update layout</button>
  </div>
</template>

해당페이지에서만 바꿀수도 있다.

//pages/index.vue

<script setup lang="ts">
definePageMeta({
  layout: false,
})
</script>

<template>
  <div>
    <NuxtLayout name="custom">
      <template #header> Some header template content. </template>

      The rest of the page
    </NuxtLayout>
  </div>
</template>

//layouts/custom.vue

<template>
  <div>
    <header>
      <slot name="header">
        Default header content
      </slot>
    </header>
    <main>
      <slot />
    </main>
  </div>
</template>

3.  Pages

pages 관련 내용(https://nuxt.com/docs/guide/directory-structure/pages)

pages/index.vue는 ' / ' Route 이다. 

Dynamic Route & Nested Routes

 Dynamic Route는 pages의 폴더 경로를 이용해 활용한다. NextJS의 Route를 생각하면 쉽게 이해할 수 있다.

Directory Structure (폴더구성)
-| pages/
---| index.vue  => "/"

---| login.vue  => "/login"

---| haha/
-----| index.vue  => "/haha"

---| usersprofile/
---| index.vue =>"/userprofile" index가 우선권이 있다.
-----| [id].vue  => "/userprofile/유저의 id혹은 고유번호 기타 등등"

---| board-[group]/
-----| [id].vue  => "/board-게시판의종류 혹은 기타/게시물 번호"

 

 아래의 사례로 라우팅에 대한 확인도 할 수 있다.

<script setup lang="ts">
const route = useRoute()

if (route.params.group === 'admins' && !route.params.id) {
  console.log('Warning! Make sure user is authenticated!')
}
</script>

Page Metadata

페이지의 메타데이터를 활용하려면

<script setup lang="ts">
definePageMeta({
  title: 'My home page'
})
</script>

<script setup lang="ts">
const route = useRoute()

console.log(route.meta.title) // My home page
</script>

그밖의 메타데이터 활용은 문서 참조.

Navigation

페이지간 이동은  <NuxtLink>를 사용한다.

<template>
  <NuxtLink to="/about">
    About page
  </NuxtLink>
</template>

 

또한 이벤트로는 navigateTo 함수를 사용해서 이용할수도 있다.

<script setup lang="ts">
useTitle("메인");
const name = ref("");
const type = ref(1);

function navigate() {
  return navigateTo({
    path: "/search",
    query: {
      name: name.value,
      type: type.value,
    },
  });
}
</script>
<template>
  <div>
    <p>메인페이지 인디용~~</p>
    <button @click="navigate()">gogo</button>
  </div>
</template>
<style scoped>
h1 {
  color: red;
}
</style>

 

4. Components

• components 관련 내용(https://nuxt.com/docs/guide/directory-structure/components)

Root폴더에 components폴더를 만든다. 또한 Nuxt에서는 따로 import하지 않고 바로 불러 올 수 있다.

// /components/KingBtn.vue

<template>
  <div>
    <button>im the king</button>
  </div>
</template>


// /pages/search.vue

<script setup lang="ts">
import 컴포넌트 이름 from '컴포넌트경로'
const show = ref(false);
</script>

<template>
  <div>
    <h1>search</h1>
    
    <LazyKingBtn v-if="show" />
    <!-- Component앞에 Lazy 접두사를 붙이면 컴포넌트가 지연 로딩이 되로록 설정할수 있다. 
    이를 통해 초기 로드시 컴포넌트를 불러오지 않고 컴포넌트가 실제로 필요한 시점에 
    비로소 로드되게끔 만드는 기능이다. -->
    
    <button @click="show = !show">King BTN</button>
    
    <component :is="import한 component이름"/>
  </div>
</template>

 

Client Component를 사용하기 위해서는 

[파일명.client.vue]로 파일이름을 지어주면 된다.

 

5. Error Page

• 에러페이지 관련 (https://nuxt.com/docs/getting-started/error-handling#error-page)

에러페이지를 커스텀하기 위해서는 Root폴더에 error.vue를 만들어준다.