Vue ile bir component'i eklemek istediğimizde hem import etmemiz hem de componentlerimizin arasına her defasında yazmamız gerekiyor. Bu yöntemin yerine sık kullandığımız componentleri global olarak uygulamamıza tanıtıp bu süreçten kurtulabiliriz. Bir Laravel Inertia Vue uygulamasında global olarak bir component nasıl eklenir?

Inertia.js kullanırken sıklıkla Link componentini kullanıyoruz. En temel hâli ile her Link componenti eklemek istediğimizde aşağıdaki gibi iki adım uygulamak gerekiyor:

<script>
import { ArrowNarrowLeftIcon, ArrowNarrowRightIcon } from '@heroicons/vue/solid';
// 1) import et
import { Link } from '@inertiajs/inertia-vue3';

export default {
    components: {
        ArrowNarrowLeftIcon,
        ArrowNarrowRightIcon,
				Link, // 2) componentler arasına ekle
    },
    props: {
        links: Array,
        only: Array,
    },
}
</script>

Bu adımları da aradan çıkartmak için resources/js/app.js dosyamızda tek seferliğine aşağıdaki gibi değişiklik yaparak global olarak Link componentini ekleyebiliriz.

import {createApp, h} from 'vue';
// 1) import et ({createInertiaApp} => {createInertiaApp, Link})
import {createInertiaApp, Link} from '@inertiajs/inertia-vue3';
import {InertiaProgress} from '@inertiajs/progress';

createInertiaApp({
    resolve: name => import('./Pages/${name}'),
    setup({el, app, props, plugin}) {
        return createApp({render: () => h(app, props)})
            .use(plugin)
            .mixin({methods: {route}})
            .component('Link', Link) // 2) component olarak ekle
            .mount(el);
    },
});

InertiaProgress.init({color: 'red', showSpinner: true});

Artık Link component'ini her defasında import etmeye gerek kalmadan sayfalarınızda kullanabilirsiniz. Link component'i gibi farklı componentleri de aynı bu şekilde tanımlayabilirdik:

// 1) import
import {componentA} from 'vue';
import {componentB} from 'vue';

createInertiaApp({
    resolve: name => import('./Pages/${name}'),
    setup({el, app, props, plugin}) {
        return createApp({render: () => h(app, props)})
            .use(plugin)
            .mixin({methods: {route}})
	        // 2) global componentleri tanımla  
            .component('Link', Link)
	        .component('ComponentA', ComponentA)
 	        .component('ComponentB', ComponentB)
            .mount(el);
    },
});

Fakat hangi componentleri global olarak tanımladığımıza dikkat etmekte fayda var. Çok sık ve her yerde kullandığımız bir Link componenti için değebilir olsa da componentlerinizi genelde local olarak tanımlamanızı tavsiye ediyorum. Bunun bazı faydaları (Tree Shaking, component içinde editör analizini kolaylaştırma gibi) olabilir. Tabii ki projenize ve tercihinize göre bu size kalmış bir şey.