Vue vs Angular: Which Framework to Choose?

ng new <applicationname>

json-server --watch db.json 
or
npx json-server --watch db.json

export class Tasks
{
    id:number=0;
    task_description:string="";
    isDone:boolean=false;
}

<div class="container-fluid bg-light h500">
    <div class="container bg-light">
        <div class="row mt-4 h500">
            <div class="col"></div>
            <div class="col-md-6 bg-white shadow">
                <div class="card bg-warning mt-4">
                    <h4 class="text-white ps-3 pt-2 pb-2">To Do List App</h4>
                </div>
                <div class="shadow">
                    <form [formGroup]="todolistForm">
                        <div class="input-group p-4">
                            <div class="form-group">
                                <input formControlName="taskDescription" type="text" class="w440 me-2 form-control"
                                    placeholder="Enter task description" name="taskDescription1"
                                    [(ngModel)]="addTaskDescrption" />
                                    <span class="ml-6 text-danger" *ngIf="isSubmitted && !todolistForm.valid">This field is required</span>
                            </div>
                            <button type="button" class="h39 btn btn-outline-success" (click)="addTask()">+</button>
 
                        </div>
                    </form>
                </div>
                <h4 class="text-primary mt-4">Tasks:</h4>
                <div class="task-list">
                    <div class="m-3" *ngFor="let task of taskList">
                        <div class="p-2 shadow border">
 
                            <div class="input-group row ps-3">
                                <div class="card col-md-10 border-0">
                                    <label [ngClass]="{'strikethrough':task.isDone}" id="{{task.id}}">
                                        {{task.task_description}}
                                    </label>
                                </div>
                                <button *ngIf="!task.isDone" (click)="taskCompleted(task)"
                                    class="btn btn-outline-primary col w-10 me-2 "><svg
                                        xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                        class="bi bi-check2" viewBox="0 0 16 16">
                                        <path
                                            d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z" />
                                    </svg></button>
                                <button (click)="deleteTask(task)" class="btn btn-outline-info col w-10 me-2"
                                    *ngIf="task.isDone"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                        fill="currentColor" class="bi bi-x-lg" viewBox="0 0 16 16">
                                        <path
                                            d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z" />
                                    </svg></button>
                                <button (click)="deleteTask(task)" class="btn btn-outline-danger col w-10">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                        class="bi bi-trash3" viewBox="0 0 16 16">
                                        <path
                                            d="M6.5 1h3a.5.5 0 0 1 .5.5v1H6v-1a.5.5 0 0 1 .5-.5ZM11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3A1.5 1.5 0 0 0 5 1.5v1H2.506a.58.58 0 0 0-.01 0H1.5a.5.5 0 0 0 0 1h.538l.853 10.66A2 2 0 0 0 4.885 16h6.23a2 2 0 0 0 1.994-1.84l.853-10.66h.538a.5.5 0 0 0 0-1h-.995a.59.59 0 0 0-.01 0H11Zm1.958 1-.846 10.58a1 1 0 0 1-.997.92h-6.23a1 1 0 0 1-.997-.92L3.042 3.5h9.916Zm-7.487 1a.5.5 0 0 1 .528.47l.5 8.5a.5.5 0 0 1-.998.06L5 5.03a.5.5 0 0 1 .47-.53Zm5.058 0a.5.5 0 0 1 .47.53l-.5 8.5a.5.5 0 1 1-.998-.06l.5-8.5a.5.5 0 0 1 .528-.47ZM8 4.5a.5.5 0 0 1 .5.5v8.5a.5.5 0 0 1-1 0V5a.5.5 0 0 1 .5-.5Z" />
                                    </svg>
                                </button>
                            </div>
 
                        </div>
                    </div>
                </div>
            </div>
            <div class="col"></div>
 
        </div>
    </div>
</div>

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { Tasks } from '../../model/tasks';
import { TodolistService } from '../../services/todolist.service';
 
@Component({
  selector: 'app-todo-list',
  templateUrl: './todo-list.component.html',
  styleUrls: ['./todo-list.component.css']
})
export class TodoListComponent implements OnInit {
  taskObj: Tasks = new Tasks();
  taskList: Tasks[] = [];
  addTaskDescrption: string = "";
  public todolistForm!: FormGroup;
  isSubmitted=false;
  constructor(private service: TodolistService,private fb: FormBuilder) { }
 
  ngOnInit(): void {
    this.taskList = [];
    this.initializeForm()
    this.getTask();
  }
  initializeForm() {
   this.todolistForm=this.fb.group({
    taskDescription:new FormControl(null, Validators.required)
   })
  }
  getTask(): void {
    this.service.getTask().subscribe(response => {
      this.taskList = response;
    });
  }
  addTask() {
    this.isSubmitted=true;
    if (this.todolistForm.valid) {
      this.taskObj.task_description = this.addTaskDescrption;
      this.taskObj.isDone = false;
      this.service.post_Put_Task(this.taskObj).subscribe(response => {
        this.ngOnInit();
        this.addTaskDescrption = "";
        this.isSubmitted=false;
      })
    }
  }
 
  deleteTask(task: Tasks): void {
    this.service.deleteTask(task).subscribe(response => {
      this.ngOnInit();
    })
  }
  taskCompleted(task: Tasks): void {
    if (this.taskList) {
      const filterTask = this.taskList.filter(x => x.id === task.id);
      if (filterTask && filterTask[0]) {
        filterTask[0].isDone = true;
        this.service.taskDone(filterTask[0]).subscribe(response => {
          this.ngOnInit();
        })
      }
    }
  }
}

.h500{
    height: 500px !important;
}
.task-list{
    overflow-y:auto ;
    height: 350px;
}
.w-10{
    width: 10px;
}
.strikethrough {
    text-decoration: line-through;
}
.w440{
    width:440px;
}
.h39{
    height: 39px;
}
.ml-6{
    margin-left: 6px;
}

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { Tasks } from '../model/tasks';
 
@Injectable({
  providedIn: 'root'
})
export class TodolistService {
  serviceURL: string;
 
  constructor(private http: HttpClient) {
    this.serviceURL = "http://localhost:3000/task";
  }
 
  post_Put_Task(task: Tasks): Observable<Tasks> {
    if (task.id > 0) {
      return this.http.put<Tasks>(this.serviceURL + "/" + task.id, task);
    } else {
      return this.http.post<Tasks>(this.serviceURL, task);
    }
  }
  getTask(): Observable<Tasks[]> {
    return this.http.get<Tasks[]>(this.serviceURL);
  }
  deleteTask(task: Tasks): Observable<Tasks> {
    return this.http.delete<Tasks>(this.serviceURL + "/" + task.id);
  }
  taskDone(task:Tasks):Observable<Tasks>{
    return this.http.put<Tasks>(this.serviceURL + "/" + task.id, task);
  }
}

npm start

vue create vuetify-todo

npm install vuetify

npm install vue-router

import { createRouter, createWebHashHistory } from 'vue-router'
import Todo from '../views/Todo.vue'
 
const routes = [
  {
    path: '/',
    name: 'Todo',
    component: Todo
  }
]
 
const router = createRouter({
  history: createWebHashHistory(),
  routes
})
 
export default router

 <router-view></router-view>

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import vuetify from './plugins/vuetify'
import { loadFonts } from './plugins/webfontloader'
 
loadFonts()
 
createApp(App)
  .use(router)
  .use(vuetify)
  .mount('#app')

<template>
  <div class="home">
    <v-text-field
      clearable
      hide-details
      v-model="newTaskTitle"
      class="pa-3"
      variant="outlined"
      label="Add Task"
      @click:appendInner="addTask"
      @keyup.enter="addTask"
      :append-inner-icon="newTaskTitle ? 'mdi-plus' : ''"
 
    ></v-text-field>
    <v-list class="pt-0" flat>
      <div v-for="task in tasks" :key="task.id">
        <v-list-item
          @click="doneTask(task.id)"
          :class="{ 'bg-blue-lighten-5': task.done }"
        >
          <template v-slot:prepend>
            <v-list-item-action start>
              <v-checkbox-btn :model-value="task.done"></v-checkbox-btn>
            </v-list-item-action>
          </template>
          <v-list-item-title
            :class="{ 'text-decoration-line-through': task.done }"
          >
            {{ task.title }}
          </v-list-item-title>
          <template v-slot:append>
            <v-btn
              @click.stop="deleteTask(task.id)"
              color="primary lighten-1"
              icon="mdi-delete"
              variant="text"
            ></v-btn>
          </template>
        </v-list-item>
        <v-divider></v-divider>
      </div>
    </v-list>
  </div>
</template>
 
<script>
export default {
  name: "Home",
  data() {
    return {
      newTaskTitle: "",
      tasks: [
        {
          id: 1,
          title: "Wake up",
          done: false,
        },
        {
          id: 2,
          title: "Get bananas",
          done: true,
        },
        {
          id: 3,
          title: "Eat bananas",
          done: false,
        },
      ],
    };
  },
  methods: {
    addTask() {
      let newTask = {
        id: Date.now(),
        title: this.newTaskTitle,
        done: false,
      };
      this.tasks.push(newTask);
      this.newTaskTitle = "";
    },
    doneTask(id) {
      let task = this.tasks.filter((task) => task.id === id)[0];
      task.done = !task.done;
    },
    deleteTask(id) {
      this.tasks = this.tasks.filter((task) => task.id !== id);
    },
  },
};
</script>

npm run serve