Jae Front-end Study

Pages & Routing with Nuxt 3 — Course part 2

https://www.youtube.com/watch?v=tdgUDuD3fS4&list=PL8HkCX2C5h0XT3xWYn71TlsAAo0kizmVc&index=2

유튜브 강의를 참고하고 있습니다.

1. pages 폴더 만들기

pages 폴더를 만들고, 그 안에 ~.vue 파일을 만들면 http://localhost:3000/ 주소에서 500 에러가 발생한다.

pages 폴더가 만들어지면 app.vue 파일에서 pages/~.vue 파일과 경로를 매칭하지 못하기 때문이다.

2. app.vue 파일 수정하기

• app.vue

1. <NuxtLayout>, <NuxtPage> 컴포넌트를 이용해 pages/~.vue 파일들이 <NuxtPage> 태그 대신에 보이도록 한다.
2. <header> 태그를 추가해서 모든 pages/~.vue 파일에서 <header> 태그가 import 되게 만든다.
3. <style> 태그를 추가해서 css를 적용한다.

<template>
  <NuxtLayout>
    <div class="wrap">
      <header>
        <ul>
          <li>
            <NuxtLink to="/">Home</NuxtLink>
            <NuxtLink to="/events">Events</NuxtLink>
          </li>
        </ul>
      </header>

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

<style lang="scss" scoped>
header {
  ul {
    height: 50px;

    li {
      display: flex;
      justify-content: start;
      align-items: center;
      gap: 20px;

      a {
        font-size: 20px;
        font-weight: 700;
      }
    }
  }
}
</style>

3. vue 파일 만들기

• pages/index.vue

<template>
  <div>index page</div>
</template>

• pages/event/index.vue

<template>
  <div>events page</div>
</template>

결과 화면