begynte på etymologi

src/App.vue

@@ -26,8 +26,8 @@ export default {
   font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  text-align: center;
   color: #2c3e50;
   margin-top: 60px;
+  margin-left: 600px;
 }
 </style>

src/components/Article.vue

 <template>
   <div class="hello">
     <h1>{{ article_header }}</h1>
+    <div class="">
+      <h3>Etymologi</h3>
+        <ul>
+          <DefElement v-for="(item, index) in article.etymology" :key="index" :element='item' v-if="item.content" />
+        </ul>
 
+    </div>
+    <div class="">
+      <h3>Definisjoner</h3>
+    </div>
   </div>
 </template>
 
 <script>
 import axios from "axios";
+import DefElement from './DefElement.vue'
+
 export default {
   name: 'Article',
   props: {
@@ -33,6 +44,9 @@ export default {
       )
       return lemmas.join(', ')
     }
+  },
+  components: {
+    DefElement
   }
 }
 </script>
@@ -42,14 +56,6 @@ export default {
 h3 {
   margin: 40px 0 0;
 }
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
 a {
   color: #42b983;
 }

src/components/DefElement.vue

+<template>
+  <li>
+    <div :class="element.type">
+      {{ element.content }}
+    </div>
+  </li>
+</template>
+
+<script>
+export default {
+  name: 'DefElement',
+  props: {
+    element: Object
+  }
+}
+</script>