The last component we will add in the application is Ticket, which display a detailed view of one ticket by its ID. It will show the title and description inputted by the user, plus the date and the status.

1. Create a new Ticket.vue file and add this template with the usual loading animation and not found notice:

      <template>
        <div class="ticket">
          <h2>Ticket</h2>
    
          <Loading v-if="remoteDataBusy"/>
    
          <div class="empty" v-else-if="!ticket">
            Ticket not found.
          </div>
    
          <template v-else>
            <!-- General info -->
            <section class="infos">
              <div class="info">
                Created on <strong>{{ ticket.date | date }}</strong>
              </div>
              <div class="info">
                Author <strong>{{ ticket.user.username }}</strong>
              </div>
              <div class="info">
                Status <span class="badge">{{ ticket.status }}</span>
              </div>
            </section>
            <!-- Content -->
            <section class="content">
              <h3>{{ ticket.title }}</h3>
              <p>{{ ticket.description }}</p>
            </section>
          </template>
        </div>
      </template>

2. Then add an id prop to the component:

      <script>
      export default {
        props: {
          id: {
            type: String,
            required: true,
          },
        },
      }
      </script>