Added single page to router and API calls

src/components/celestials/CelestialCard.vue

@@ -34,6 +34,20 @@
       </div>
 
       <div class="card-content">
+        <div v-if="celestial.aroundPlanet">
+          <p>
+            Orbite autour de
+            <router-link
+              :to="{
+                name: 'CelesteSingle',
+                params: { slug: celestial.aroundPlanet.planet }
+              }"
+              class="txt-capitalize"
+            >
+              {{ celestial.aroundPlanet.planet }}
+            </router-link>
+          </p>
+        </div>
         <div v-if="celestial.gravity">
           <p>Facteur Gravité : {{ celestial.gravity }}</p>
         </div>
@@ -52,7 +66,12 @@
       </div>
 
       <div class="card-actions">
-        <a href="#" class="btn btn-primary">Détails</a>
+        <router-link
+          :to="{ name: 'CelesteSingle', params: { slug: celestial.id } }"
+          class="btn btn-primary"
+        >
+          Détails
+        </router-link>
       </div>
     </div>
   </div>

src/router/index.ts

@@ -20,12 +20,12 @@ const routes: Array<RouteRecordRaw> = [
   },
   {
     path: "/celestes",
-    name: "Célestes",
+    name: "CelesteAll",
     component: Celestials
   },
   {
     path: "/celestes/:slug",
-    name: "Céleste",
+    name: "CelesteSingle",
     component: Celestial,
     props: true
   },

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 => {