Building the UI Structure

After setting up the project, the next step is to create the main interface of the application. Start by defining the layout in App.vue.

<template>
  <main class="app">
    <h1>Task Tracker</h1>
    <p>Manage your daily tasks</p>
  </main>
</template>

This creates the main heading and a short description for the app.

Next, add a section for the form and a section for the task list.

<template>
  <main class="app">
    <h1>Task Tracker</h1>
    <p>Manage your daily tasks</p>

    <section class="form-section">
      <input type="text" placeholder="Enter a task" />
      <button>Add Task</button>
    </section>

    <section class="list-section">
      <ul>
        <li>Finish homework</li>
        <li>Read 10 pages</li>
      </ul>
    </section>
  </main>
</template>

This gives the application a clear structure with input, button, and list areas.

You can also add basic styles to make the layout easier to read.

<style>
.app {
  max-width: 500px;
  margin: 40px auto;
  font-family: Arial, sans-serif;
}

.form-section {
  display: flex;
  gap: 10px;
  margin: 20px 0;
}

.list-section ul {
  padding-left: 20px;
}
</style>

Building the UI structure first helps you see the app layout before adding logic and interactivity.