class 08

package.json

@@ -14,6 +14,7 @@
     "vue-router": "^4.2.4"
   },
   "devDependencies": {
+    "@tailwindcss/typography": "^0.5.9",
     "@vitejs/plugin-vue": "^4.2.3",
     "autoprefixer": "^10.4.15",
     "postcss": "^8.4.28",

src/api/usePosts.js

@@ -1,17 +1,26 @@
 import {ref} from "vue";
 import axios from "axios";
 
-export default function usePosts() {
+export default function usePosts(slug) {
     const posts = ref([]);
+    const post = ref({});
 
     const fetchPosts = async () => {
         let response = await axios.get('/api/posts');
 
         posts.value = response.data.data
     }
 
+    const fetchPost = async () => {
+        let response = await axios.get(`/api/posts/${slug}`);
+
+        post.value = response.data.data
+    }
+
     return {
         posts,
-        fetchPosts
+        post,
+        fetchPosts,
+        fetchPost
     }
 }

src/pages/Home.vue

@@ -14,12 +14,12 @@ onMounted(fetchPosts)
         v-for="post in posts"
         :key="post.uuid"
     >
-      <a href="" class="block">
+      <router-link :to="{ name: 'post', params: {slug: post.slug}}" class="block">
         <h1 class="text-3xl sm:text-4xl leading-10 font-extrabold tracking-tight text-gray-900">{{ post.title }}</h1>
         <p class="mt-6 text-gray-500">
           {{ post.teaser }}
         </p>
-      </a>
+      </router-link>
     </div>
   </div>
 </template>

src/pages/Post.vue

@@ -0,0 +1,27 @@
+<script setup>
+import usePosts from "../api/usePosts.js";
+import { onMounted } from "vue";
+
+const props = defineProps({
+  slug: {
+    type: String,
+    required: true
+  }
+})
+
+const {post, fetchPost} = usePosts(props.slug)
+
+onMounted(fetchPost)
+
+</script>
+
+<template>
+  <h1 class="block text-center text-4xl sm:text-6xl leading-10 font-extrabold tracking-tight text-gray-900">
+    {{ post.title }}
+  </h1>
+  <div class="prose lg:prose-xl mt-16 text-gray-500" v-html="post.body"></div>
+</template>
+
+<style scoped>
+
+</style>

src/router/index.js

@@ -1,11 +1,18 @@
 import { createRouter, createWebHistory } from "vue-router";
 import Home from "../pages/Home.vue";
+import Post from "../pages/Post.vue";
 
 const routes = [
     {
         path: '/',
         name: 'home',
         component: Home
+    },
+    {
+        path: '/posts/:slug',
+        name: 'post',
+        component: Post,
+        props: true
     }
 ]
 

tailwind.config.js

@@ -7,6 +7,8 @@ export default {
   theme: {
     extend: {},
   },
-  plugins: [],
+  plugins: [
+    require('@tailwindcss/typography'),
+  ],
 }