index.html 에 googlefonts 를 가져와서 사용한다.

<style>
  body {
    line-height: 1.4;
    font-family: "Roboto", sans-serif;
  }
</style>

// components 폴더에 **Logo.vue** 생성
// to="/" 는 Logo 를 누르면 메인 홈페이지로 이동하게 한다.

<template>
  <RouterLink
    to="/"
    class="logo">
    <span>OMDbAPI</span>.COM
  </RouterLink>
</template>

<style lang="scss" scoped>
@import "~/scss/main";

.logo {
  font-family: "Oswald", sans-serif;
  font-size: 20px;
  color: $black;
  text-decoration: none;
  &:hover {
    color: $black
  }
  span {
    color: $primary
  }
}
</style>

// Header.vue

// Logo component 추가
<template>
  <header>
    <Logo />
~~~~~
</header>
</template>

<script>
import Logo from "~/components/Logo"

export default {
  components: {
    Logo
  },
~~~~
}
</script>

<style lang="scss" scoped>
header {
  height: 70px;
  padding: 0 40px;
  display: flex;
  align-items: center;
  .logo {
    margin-right: 40px;
  }
}

</style>