[nuxt3] nuxt3 + vuetify3 + pinia + typescript로 todolist앱 만들기 -4- layouts

docs: https://nuxt.com/docs/guide/directory-structure/layouts

layouts는 Nuxt에서 헤더, 푸터나 배경 등을 재활용하기 위해 사용합니다.

• root 경로에 layouts폴더 생성 > default.vue 파일 생성 > 아래 코드 입력

<template>
  <nav>
    <NuxtLink to="/">home</NuxtLink>
    <NuxtLink to="/posts">posts</NuxtLink>
    <NuxtLink to="/profile">profile</NuxtLink>
    <NuxtLink to="/login">login</NuxtLink>
  </nav>
  <slot />
  <div>footer</div>
</template>
<script setup lang="ts"></script>
<style lang="scss" scoped>
nav {
  & > a {
    text-decoration: none;
    color: green;
    &:hover {
      color: blueviolet;
    }
  }
  display: flex;
  gap: 8px;
}
</style>

• app.vue에 아래 코드 넣기

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>
<script setup lang="ts"></script>
<style lang="scss" scoped>
</style>

• 혹시 에러가 난다면 컨트롤 + c 연타연ㅌ
• 아래와 같은 화면이 나온 것을 볼 수 있습니다. 되게 간편하죠? 이제 앱의 헤더와 푸터를 여러 페이지에서 동일하게 맞춰줄 수 있게 되었습니다.
• Nuxt3의 기본 레이아웃 이름은 default.vue 입니다. 그럼 다른 레이아웃은 어떻게 씌울까요? 로그인 페이지를 만들어 봅시다. 로그인 화면에서는 네비게이션과 푸터를 다르게 보여주고 싶습니다. 그러면 이제 로그인 레이아웃을 만들어서 적용 시켜봅시다.
• layouts 폴더에 login.vue 파일 생성 > 아래 내용 입력

<template>
  <nav>
    <NuxtLink to="/">home</NuxtLink>
  </nav>
  <slot />
  <div>login footer</div>
</template>
<script setup lang="ts"></script>
<style lang="scss">
#__nuxt {
  display: grid;
  place-content: center;
  grid-template-rows: 1fr 8fr 1fr;
  width: 100vw;
  height: 100vh;
}
nav {
  & > a {
    text-decoration: none;
    color: green;
    &:hover {
      color: blueviolet;
    }
  }
  display: flex;
  gap: 8px;
}
</style>

• layout에선 scoped를 풀어줍니다. 왜냐면 layout이 최상단 부모 컴포넌트이기 때문이에요(맨 위에 있으니 css를 분리하지 않아도 됩니다.)
• definePageMeta는 넉스트에서 해당 컴포넌트의 Meta데이터를 동적으로 적용 시켜 주기 위해서 사용하는 훅(함수)입니다. layout, middleware, name, pageTransition등 많은 메타데이터를 적용 시킬 수 있습니다.
• pages 폴더 안에 login.vue 파일 생성 > 아래 내용 입력

<template>
  <div class="login">
    <h1>Login Page</h1>

    <div class="login-form">
      <button @click="$router.push('/')">메인으로</button>
      <div>이메일</div>
      <input v-model="loginForm.email" placeholder="email" />
      <div>비밀번호</div>
      <input v-model="loginForm.password" placeholder="email" />
      <button @click="onClickLoginBtn">전송</button>
    </div>
  </div>
</template>
<script setup lang="ts">
definePageMeta({
  layout: "login",
});
const router = useRouter();

const loginForm = reactive({
  email: "",
  password: "",
});

const onClickLoginBtn = () => {
  alert("로그인 성공!");
  router.push("/");
};
</script>
<style lang="scss">
.login {
  display: flex;
  flex-direction: column;
  .login-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    flex-direction: column;
    width: 300px;
    input {
      padding: 8px 12px;

      height: 32px;

      border: 2px solid gray;
      border-radius: 8px;
      outline: none;
      &:hover {
        outline: 1px solid blue;
      }
    }
  }
}
</style>

• nuxt의 최상단 id가 __nuxt 이라서 #__nuxt에 최상단에 입힐 css를 입혀줍니다.
• 이제 네비게이션 바의 로그인 버튼을 누르면 아래와 같은 화면을 볼 수 있습니다.

layouts 끝!