Simple Vue.js TODO example with TypeScript and vue-class-component

App.js

<template>
  <main role="main" class="container">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Todo example</h5>
        <p class="card-text">Simple TODO app using Bootstrap and Vue.</p>
      </div>
      <ul class="list-group list-group-flush">
        <li class="list-group-item" v-for="(todo, idx) in todos" :key="idx">
          {{ todo }}
          <button class="btn btn-danger float-end" @click="removeItem(idx)">
            <i class="fas fa-trash"></i> Remove
          </button>
        </li>
      </ul>
      <div class="card-body">
        <input
          class="col-6"
          type="text"
          placeholder="TODO item"
          v-model="todoText"
        />
        <button class="btn btn-primary float-end" @click="addItem">
          <i class="fas fa-plus"></i> Add
        </button>
      </div>
    </div>
  </main>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component
export default class App extends Vue {
  private todoText: string = "";
  private todos: string[] = [];

  public addItem() {
    this.todos.push(this.todoText);
    this.todoText = "";
  }

  public removeItem(idx: number) {
    this.todos.splice(idx, 1);
  }
}
</script>

<style lang="scss" scoped>
</style>