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

루트 폴더에 data.js 파일을 아래와 같이 만들어줍니다.

그리고 pages 디렉토리를 만든 후 안에 index.vue 파일을 만들어줍니다.

참고로 vuetify에선 class에 ma-3과 같은 이름을 추가함으로써 마진과 패딩을 줄 수 있습니다.

참고: https://vuetifyjs.com/en/styles/spacing/

CSS Spacing helpers

홈페이지와 투두 페이지를 나눠주기 위해서 NuxtLink를 사용해 라우팅을 해줍니다. 넉스트에서는 자체적으로 vue-router를 사용해서 pages 폴더를 기반으로 라우팅을 해줍니다.

<template>
  <div id="app">
    <nav>
      <NuxtLink to="/">Home</NuxtLink>
      <NuxtLink to="/todos">Todos</NuxtLink>
    </nav>
    <section>나는 홈페이지다!</section>
  </div>
</template>

위와 같이 index.vue에 적은다음 pages 폴더 아래에 todos.vue를 만들고 아래와 같이 적습니다.

<template>
  <div class="todos">
  	todo page
  </div>
</template>

<script setup lang="ts"></script>

<style></style>

다 적으셨다면 서버를 껐다 켜주세요. 터미널에서 서버를 끄는 명령어는 컨트롤 + c입니다.

완료하셨다면 이제 아래와 같은 화면을 볼 수 있습니다.

위와 같은 네비게이터를 만들었다면 이제 조금 꾸며봐야겠죠? index.vue의 <style>태그 안에 아래와 같이 적어줍니다.

<style lang="scss">
%main-display {
  display: flex;
  justify-content: center;
  align-items: center;
}
#app {
  @extend %main-display;
  flex-direction: column;
}
body {
  @extend %main-display;
  margin: 0;
}
nav {
  @extend %main-display;
  background-color: black;
  width: 100vw;
  & > a {
    text-decoration: none;
    font-weight: bold;
    color: white;
    margin: 10px;
    &:hover {
      color: darken(white, 30%);
    }
  }
}
</style>

그럼 아래와 같은 화면을 볼 수 있습니다.

• %: 화면에 적용되진 않지만 상속해서 쓸 수 있는 선택자를 만드는 키워드
• @extend: 선택자를 상속해서 적용하는 키워드
• &: 내 부모를 가르키는 키워드(예: .temp{& a{(속성)}}와 같이 쓰면 .temp a{}에 적용되는 것과 같다)
• >: a > b 에서 a 안의 모든 b에 속성을 적용하는 키워드

드디어 예쁜 홈화면과 네비게이션 화면이 생겼군요!