Added single page to router and API calls

src/views/celestials/Celestial.vue

@@ -1,13 +1,59 @@
 <template>
   <section class="celestial">
-    <h2>Single Celestial</h2>
+    <header>
+      <h1 class="heading-1">{{ celestial.name }}</h1>
+    </header>
   </section>
 </template>
 
 <script lang="ts">
 import { defineComponent } from "vue";
 
+// API
+import axios from "axios";
+// Global methods
+import { addCelestialType } from "@/plugins/methods";
+
 export default defineComponent({
-  name: "Celestial"
+  name: "Celestial",
+  data() {
+    return {
+      celestial: {},
+      error: ""
+    };
+  },
+  props: {
+    slug: {
+      type: String,
+      required: true
+    }
+  },
+  mounted() {
+    // Fetches from API...
+    this.fetchCelestial()
+      .then(res => {
+        // ...and add type
+        this.celestial = addCelestialType(res);
+      })
+      .catch(err => {
+        this.error = err.message;
+      });
+  },
+  methods: {
+    /**
+     * Fetches celestial bodies from API
+     */
+    fetchCelestial(): Promise<any> {
+      return axios
+        .get(`https://api.le-systeme-solaire.net/rest/bodies/${this.slug}`)
+        .then(res => {
+          return res.data;
+        })
+        .catch(err => {
+          this.error = err.message;
+          return [];
+        });
+    }
+  }
 });
 </script>

src/views/celestials/Celestials.vue

@@ -15,7 +15,6 @@ import CelestialsList from "@/components/celestials/CelestialsList.vue";
 
 // API
 import axios from "axios";
-
 // Global methods
 import { addCelestialType } from "@/plugins/methods";
 
@@ -32,20 +31,19 @@ export default defineComponent({
     };
   },
 
-  async mounted() {
+  mounted() {
     // Fetches from API...
-    this.fetchBodies().then(res => {
+    this.fetchCelestials().then(res => {
       // ...and add type
       this.celestials = this.addType(res);
     });
-    console.log(this.$options);
   },
 
   methods: {
     /**
      * Fetches celestial bodies from API
      */
-    fetchBodies(): Promise<any> {
+    fetchCelestials(): Promise<any> {
       return axios
         .get("https://api.le-systeme-solaire.net/rest/bodies/")
         .then(res => {