class 07

package.json

@@ -9,7 +9,9 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "vue": "^3.3.4"
+    "axios": "^1.5.0",
+    "vue": "^3.3.4",
+    "vue-router": "^4.2.4"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.2.3",

src/App.vue

@@ -3,9 +3,7 @@
 </script>
 
 <template>
-  <div>
-    <h1 class="text-3xl font-bold underline">
-      Hello world!
-    </h1>
+  <div class="max-w-4xl mx-auto py-20 px-4 sm:px-6 lg:px-8">
+    <router-view/>
   </div>
 </template>

src/api/usePosts.js

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

src/main.js

@@ -1,5 +1,9 @@
 import { createApp } from 'vue'
 import './style.css'
 import App from './App.vue'
+import router from "./router/index.js";
+import axios from "axios";
 
-createApp(App).mount('#app')
+axios.defaults.baseURL = 'http://localhost:8000';
+
+createApp(App).use(router).mount('#app')

src/pages/Home.vue

@@ -0,0 +1,29 @@
+<script setup>
+import {onMounted} from "vue";
+import usePosts from "../api/usePosts.js";
+
+const {posts, fetchPosts} = usePosts()
+
+onMounted(fetchPosts)
+
+</script>
+
+<template>
+  <div class="space-y-16">
+    <div
+        v-for="post in posts"
+        :key="post.uuid"
+    >
+      <a href="" 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>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

src/router/index.js

@@ -0,0 +1,15 @@
+import { createRouter, createWebHistory } from "vue-router";
+import Home from "../pages/Home.vue";
+
+const routes = [
+    {
+        path: '/',
+        name: 'home',
+        component: Home
+    }
+]
+
+export default createRouter({
+    history: createWebHistory(),
+    routes
+})