Nuxt Header & Footer

먼저, 헤더와 푸터 파일을 각각 만들어준다.

모든 페이지에서 쓰이므로 components/common에 생성한다.

components/common/Header.vue

<template>
  <header>
    <NuxtLink to="/" class="link">Home</NuxtLink>
    <NuxtLink to="/user/login" class="link">Login</NuxtLink>
    <NuxtLink to="/user/register" class="link">Register</NuxtLink>
  </header>
</template>
<script>
export default {}
</script>
<style>
header {
  height: 5vh;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  background-color: blanchedalmond;
}
.link {
  border: none;
  border-radius: 5px;
  text-decoration: none;
  color: black;
  margin-right: 20px;
  font-size: 17px;
}
</style>

 

• Nuxt(Vue3.0)은 <template>태그 안에 최상위 태그가 무조건 한 개 존재해야 한다.
• Nuxt에서 React의 Link와 같은 기능을 사용하고 싶을 때에는 NuxtLink를 사용한다.

<NuxtLink to="/" class="link">Home</NuxtLink>

사용 방법은 Link와 똑같다.

 

components/common/footer.vue

<template>
  <footer>
    <div>
    연습용으로 만들고 있읍니다.</div>
    <div>
    연습용으로 만들고 있읍니다.</div>
    <div>
    연습용으로 만들고 있읍니다.</div>
  </footer>
</template>
<script>
export default {}
</script>
<style>
footer{
  background-color: bisque;
  position: fixed;
  bottom: 0;
  padding: 10px;
  width: 100%;
  height: 15vh;
  display: flex;
  justify-content: space-around;;
}
</style>

 

헤더 푸터 적용하기

app.vue에 헤더와 푸터를 박아준다!

<template>
  <div id="app">
    <Header></Header>
    <NuxtPage />
    <Footer></Footer>
  </div>
</template>
<script lang="ts">
import Footer from "~/components/common/Footer.vue";
import Header from "../components/common/Header.vue";
export default {
  components: { Header, Footer },
};
</script>
<style scoped>
#app {
  background-color: olive;
  height: 100vh;
}
</style>