"Nuxt.js ile To-Do List Uygulaması Nasıl Yapılır?"

Nuxt.js, Vue.js tabanlı bir framework olup sunucu taraflı render (SSR), statik site oluşturma (SSG) ve istemci taraflı render (SPA) gibi özellikleriyle öne çıkmaktadır. Bu makalede, Nuxt.js kullanarak bir To-Do List uygulaması nasıl oluşturulacağını adım adım anlatacağız.

1. Proje Kurulumu

Öncelikle Nuxt.js projesini oluşturmalıyız. Terminalde aşağıdaki komutları çalıştırarak yeni bir proje başlatabiliriz:

npx nuxi init todo-app
cd todo-app
npm install

Ardından geliştirme ortamını başlatmak için şu komutu çalıştırın:

npm run dev

2. Proje Yapısı

To-Do List uygulamamız için temel dosya yapısı şu şekilde olacak:

todo-app/
│── components/
│   ├── TodoItem.vue
│── pages/
│   ├── index.vue
│── store/
│   ├── todo.js
│── nuxt.config.ts
│── package.json

3. Vuex Store ile Veri Yönetimi

Nuxt.js ile birlikte Vuex Store kullanarak görevleri yönetelim. store/todo.js dosyasını oluşturup içeriğini şu şekilde yazalım:

export const state = () => ({
  todos: []
});

export const mutations = {
  ADD_TODO(state, todo) {
    state.todos.push(todo);
  },
  REMOVE_TODO(state, index) {
    state.todos.splice(index, 1);
  }
};

4. To-Do Bileşeni

Şimdi her bir görevi göstermek için bir bileşen oluşturalım. components/TodoItem.vue dosyasını oluşturun ve aşağıdaki kodu ekleyin:

<template>
  <li>
    {{ todo.text }}
    <button @click="$emit('remove')">Sil</button>
  </li>
</template>

<script>
export default {
  props: ['todo']
};
</script>

5. Ana Sayfa

Şimdi pages/index.vue dosyasını düzenleyerek listeyi ve ekleme alanını oluşturalım:

<template>
  <div>
    <h1>To-Do List</h1>
    <input v-model="newTodo" @keyup.enter="addTodo" placeholder="Yeni görev ekleyin" />
    <ul>
      <TodoItem v-for="(todo, index) in todos" :key="index" :todo="todo" @remove="removeTodo(index)" />
    </ul>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import TodoItem from '@/components/TodoItem.vue';

export default {
  components: { TodoItem },
  data() {
    return {
      newTodo: ''
    };
  },
  computed: {
    ...mapState('todo', ['todos'])
  },
  methods: {
    ...mapMutations('todo', ['ADD_TODO', 'REMOVE_TODO']),
    addTodo() {
      if (this.newTodo.trim() !== '') {
        this.ADD_TODO({ text: this.newTodo });
        this.newTodo = '';
      }
    },
    removeTodo(index) {
      this.REMOVE_TODO(index);
    }
  }
};
</script>

6. Sonuç

Bu adımları tamamladıktan sonra uygulamanız çalışır durumda olacaktır. npm run dev komutu ile uygulamanızı başlatarak test edebilirsiniz. Nuxt.js’in gücünü kullanarak geliştirmeye devam edebilir ve yerel depolama, kullanıcı giriş sistemi gibi ek özellikler ekleyebilirsiniz.

Bu rehberde, Nuxt.js kullanarak temel bir To-Do List uygulamasını nasıl oluşturabileceğinizi öğrendiniz. Umarım faydalı olmuştur! 🎯