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! 🎯
