Header base component without styles

components/Header.vue

@@ -0,0 +1,19 @@
+<template>
+  <header id="header">
+    <router-link to="/">
+      <img
+        src="https://avatars2.githubusercontent.com/u/1080062?s=200&v=4"
+        alt="PeopleDoc - Icon"
+      />
+      <h1>Ghibli</h1>
+    </router-link>
+  </header>
+</template>
+
+<script>
+export default {
+  name: "Header"
+};
+</script>
+
+<style></style>

layouts/default.vue

@@ -1,9 +1,20 @@
 <template>
   <div>
-    <Nuxt />
+    <Header />
+    <main>
+      <Nuxt />
+    </main>
   </div>
 </template>
 
+<script>
+import Header from "@/components/Header";
+
+export default {
+  components: { Header }
+};
+</script>
+
 <style>
 html {
   font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI",

pages/index.vue

@@ -1,8 +1,8 @@
 <template>
-  <main>
+  <section>
     <h1>Ghibli movies</h1>
     {{ films }}
-  </main>
+  </section>
 </template>
 
 <script>