ทำไมถึงต้องใช้ Nuxt ทั้งๆที่มี Vue อยู่แล้ว ?

<script setup>
  import { ref, computed } from "vue";
  import { useRoute } from "vue-router";

  const route = useRoute();
  const firstName = ref("");
  const lastName = ref("");

  const fullName = computed(() => {
    return `${firstName.value} ${lastName.value}`;
  });
</script>

<template>
  Fullname {{ fullName }}
  <input v-model="firstName" />
  <input v-model="lastName" />
</template>

<script setup>
  const route = useRoute();
  const firstName = ref("");
  const lastName = ref("");

  const fullName = computed(() => {
    return `${firstName.value} ${lastName.value}`;
  });
</script>

<template>
  Fullname {{ fullName }}
  <input v-model="firstName" />
  <input v-model="lastName" />
</template>

npx nuxi@latest init <project name>

├── README.md
├── app.vue
├── data
│   └── blogs.json
├── nuxt.config.ts
├── package-lock.json
├── package.json
├── pages
│   ├── index.vue
│   └── todos --> สร้าง folder นี้แทน
│       ├── [id].vue
│       └── index.vue
├── public
│   └── favicon.ico
├── server
│   └── tsconfig.json
└── tsconfig.json

<template>
  <div>
    <!-- Markup shared across all pages, ex: NavBar -->
    <NuxtPage />
  </div>
</template>

<script setup>
  const BASE_URL = 'https://<id จากเว็บ mockapi>.mockapi.io'

  const statuses = ['Pending', 'Doing', 'Done']
  const todoText = ref('')
  const isLoading = ref(true)
  const todos = ref([])

  const loadTodo = async () => {
    isLoading.value = true
    const { data } = useFetch(`${BASE_URL}/todos`, {
      lazy: true
    })
    console.log(data)
    todos.value = data.value
    isLoading.value = false
  }

  const addTodo = async () => {
    try {
      isLoading.value = true
      const todoData = {
        name: todoText.value,
        status: 'Pending'
      }
      await useFetch(`${BASE_URL}/todos`, {
        method: 'post',
        body: todoData
      })
      await loadTodo()
    } catch (error) {
      console.log('error', error)
    }
    isLoading.value = false
  }

  const deleteTodo = async (id) => {
    try {
      isLoading.value = true
      await useFetch(`${BASE_URL}/todos/${id}`, {
        method: 'delete'
      })
      await loadTodo()
    } catch (error) {
      console.log('error', error)
    }

    isLoading.value = false
  }

  // load in state setup
  await loadTodo()
</script>

<template>
  <div>
    <h1>Todo List</h1>
    <div>
      <input type="text" v-model="todoText" />
      <button @click="addTodo">Add</button>
    </div>
    <ul v-if="!isLoading">
      <li v-for="todo in todos" :key="todo.id">
        {{ todo.name }} status :
        <select v-model="todo.status">
          <option v-for="status in statuses" :key="status" :value="status">{{ status }}</option>
        </select>

        <NuxtLink :to="`/todo/${todo.id}`">
          <button>Edit</button>
        </NuxtLink>
        <button @click="deleteTodo(todo.id)">DELETE</button>
      </li>
    </ul>
    <div v-else>Loading</div>
  </div>
</template>

<script setup>
  const route = useRoute();
  const todoId = route.params.id;

  const BASE_URL = "https://<id จากเว็บ mock api>.mockapi.io";

  const { pending, data: todo } = useFetch(`${BASE_URL}/todos/${todoId}`, {
    lazy: true,
  });
  E;
</script>

<template>
  <nuxt-link to="/">Back</nuxt-link>
  <div v-if="pending">Loading</div>
  <div v-else>
    <div>Todo {{ todo.id }}</div>
    <div>{{ todo.name }}</div>
  </div>
</template>