app/components/forms/create-list-form.vue

@@ -1,12 +1,32 @@
 <script lang="ts" setup>
+const emit = defineEmits(['refreshLists']);
+const refreshLists = () => emit('refreshLists');
+const listName = ref("");
 
+const createList = () => {
+  $api('/api/movielists', {
+    body: {
+      name: listName.value,
+    },
+    method: "POST"
+  }).then(() => {
+    listName.value = "";
+    refreshLists();
+  }).catch((error) => {
+    if (error.response?.status === 401) {
+      useAuth().logout();
+    }
+    alert(error.message)
+  });
+}
 </script>
 
 <template>
-  <form>
+  <form @submit.prevent="createList">
     <label for="list_name">Add List</label>
     <div>
-      <input class="" name="list_name"
+      <input v-model="listName"
+             name="list_name"
              placeholder="List Name"
              type="text">
       <button>Add</button>

app/pages/lists/index.vue

@@ -2,19 +2,29 @@
 
 import PageTitle from "~/components/common/page-title.vue";
 import CreateListForm from "~/components/forms/create-list-form.vue";
+import type {List} from "~/types/list";
+
+const {data: lists, refresh} = await useApiData<List[]>("/api/movielists")
+
+const refreshLists = () => {
+  refresh()
+}
+
 </script>
 
 <template>
   <PageTitle title="Lists"/>
 
   <div class="content">
-    <CreateListForm/>
+    <CreateListForm @refreshLists="refreshLists"/>
 
     <div class="w-full flex flex-col gap-5">
       <h2 class="text-2xl font-bold">Your Lists</h2>
       <ul class="w-full flex flex-col gap-3">
-        <li class="flex justify-between items-center p-4 bg-gray-700/50 rounded-lg hover:bg-gray-600/50 transition-colors">
-          <NuxtLink to="lists/1">List 1</NuxtLink>
+        <li v-for="list in lists"
+            :key="list.id"
+            class="flex justify-between items-center p-4 bg-gray-700/50 rounded-lg hover:bg-gray-600/50 transition-colors">
+          <NuxtLink :to="`lists/${list.id}`">{{ list.name }}</NuxtLink>
         </li>
       </ul>
     </div>