01 February 2026 vue

Membuat Struktur Project di Vue JS yang Lebih Baik

Ini struktur project Vue JS saya dulu:

src/
    components/
        product/
            ProductNewModal.vue
            ProductDeleteConfirm.vue
            ProductDetailModal.vue
        user/
            UserNewModal.vue
            UserDeleteConfirm.vue
            UserDetailModal.vue
    stores/
        product.store.js
        user.store.js
    views/
        product/
            ProductIndexPage.vue
        user/
            UserIndexPage.vue

Pada struktur di atas, file dikelompokan berdasarkan jenisnya: Component, Store dan Views.

Sekarang saya sudah beralih ke feature based structure, yaitu file dikelompokan berdasarkan fiturnya. Contoh:

src/
    features/
        product/
            components/
                ProductNewModal.vue
                ProductDeleteConfirm.vue
                ProductDetailModal.vue
            views
                ProductIndexPage.vue
            product.store.js
        user/
            components/
                UserNewModal.vue
                UserDeleteConfirm.vue
                UserDetailModal.vue
            views
                UserIndexPage.vue
            user.store.js

Kenapa Feature Based Structure Lebih Baik?

Jawaban pertama: dalam membuat aplikasi Vue, saya selalu kerjakan per fitur, jadi setiap pengerjaan hanya fokus pada satu folder saja.

Contoh saya ingin membuat fitur Sale. Dengan feature based, saya hanya perlu membuat folder sale di dalam folder features, lalu fokus coding di dalam folder tersbut.

Jawaban kedua: dengan feature based, lebih mudah melakukan perubahan dan fixing pada suatu fitur. Karena semua file terkait fitur tersebut ada di satu folder, jadi tidak perlu cari di folder lain.

Intinya feature based structure lebih baik karena per fitur satu folder.