Vue.js 3 Composition API: Modern Frontend Geliştirme

Vue 3 Composition API

Composition API, Vue 3'ün yeni reaktif programlama yaklaşımıdır. Options API'ye göre daha esnek ve reusable kod yazmanızı sağlar.

Options vs Composition API

// Options API
export default {
    data() {
        return { count: 0 }
    },
    methods: {
        increment() { this.count++ }
    }
}

// Composition API
import { ref } from 'vue'

export default {
    setup() {
        const count = ref(0)
        const increment = () => count.value++
        return { count, increment }
    }
}

Script Setup (Syntactic Sugar)

<script setup>
import { ref, computed, onMounted } from 'vue'

const count = ref(0)
const doubled = computed(() => count.value * 2)

const increment = () => {
    count.value++
}

onMounted(() => {
    console.log('Component mounted')
})
</script>

<template>
    <button @click="increment">
        Count: {{ count }} (Doubled: {{ doubled }})
    </button>
</template>

Composables (Reusable Logic)

// composables/useCounter.js
import { ref } from 'vue'

export function useCounter(initial = 0) {
    const count = ref(initial)
    const increment = () => count.value++
    const decrement = () => count.value--

    return { count, increment, decrement }
}

// Component'te kullanım
<script setup>
import { useCounter } from '@/composables/useCounter'

const { count, increment } = useCounter(10)
</script>

Pinia State Management

// stores/user.js
import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
    state: () => ({
        user: null,
        isLoggedIn: false
    }),
    getters: {
        fullName: (state) => `${state.user?.firstName} ${state.user?.lastName}`
    },
    actions: {
        async login(credentials) {
            const response = await api.login(credentials)
            this.user = response.data.user
            this.isLoggedIn = true
        }
    }
})

// Component'te
const userStore = useUserStore()
await userStore.login({ email, password })

Vue Router

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'

const routes = [
    { path: '/', component: Home },
    { path: '/users/:id', component: UserDetail, props: true },
    {
        path: '/admin',
        component: Admin,
        meta: { requiresAuth: true }
    }
]

const router = createRouter({
    history: createWebHistory(),
    routes
})

// Navigation guard
router.beforeEach((to, from) => {
    if (to.meta.requiresAuth && !isAuthenticated()) {
        return '/login'
    }
})

Laravel Inertia.js

// Laravel Controller
return Inertia::render('Users/Index', [
    'users' => User::paginate()
]);

// Vue Component
<script setup>
defineProps({
    users: Object
})
</script>

Sonuç

Vue 3 Composition API, daha modüler ve maintainable kod yazmanızı sağlar. Laravel ile mükemmel entegrasyon sunar.