Inertia.js Sekarang Sudah Versi 1.0

Tepat pada tanggal 14 januari, Inertia.js telah resmi rilis versi 1.0, yang mana pada rilis kali ini semua di buat lebih singkat. Lebih singkat dalam arti tidak terpisah-pisah lagi.

Biasanya, jika kita ingin menggunakan Inertia, kita harus install beberapa package seperti @inertiajs/inertia, @inertiajs/progress jika butuh progress, @inertiajs/inertia-stack, dan ketika menggunakan ssr, pastinya kita juga akan membutuhkan @inertiajs/server. Sekarang ini, tidak perlu lagi, tinggal install saja inertia sesuai stack yang di inginkan, entah itu react, vue atau pun svelte.

Sebelumnya jika Anda ingin melihat langsung cara upgrade nya di youtube, bisa langsung ya.

Berikut beberapa perubahan yang akan di lakukan jika ingin update inertia ke versi 1. Pertama sekali, lakukan uninstall pada packages yang telah terinstall pada versi sebelumnya.

npm remove @inertiajs/inertia @inertiajs/inertia-react @inertiajs/progress @inertiajs/server

Kemudian, silakan install inertia dengan cara:

npm install @inertiajs/react

Setelah itu, perlu beberapa perubahan seperti:

- import { Inertia } from '@inertiajs/inertia'
+ import { router } from '@inertiajs/react'

- import createServer from '@inertiajs/server'
+ import createServer from '@inertiajs/react/server'

- import { createInertiaApp } from '@inertiajs/inertia-react'
- import { App } from '@inertiajs/inertia-react'
- import { app } from '@inertiajs/inertia-react'
- import { InertiaApp } from '@inertiajs/inertia-react'
+ import { createInertiaApp } from '@inertiajs/react'

- import { usePage } from '@inertiajs/inertia-react'
+ import { usePage } from '@inertiajs/react'

- import { useForm } from '@inertiajs/inertia-react'
+ import { useForm } from '@inertiajs/react'

- import { useRemember } from '@inertiajs/inertia-react'
- import { useRememberedState } from '@inertiajs/inertia-react'
+ import { useRemember } from '@inertiajs/react'

- import { Head } from '@inertiajs/inertia-react'
- import { InertiaHead } from '@inertiajs/inertia-react'
+ import { Head } from '@inertiajs/react'

- import { Link } from '@inertiajs/inertia-react'
- import { link } from '@inertiajs/inertia-react'
- import { InertiaLink } from '@inertiajs/inertia-react'
+ import { Link } from '@inertiajs/react'

Next jika Anda menggunakan progress, maka Anda bisa hapus progress nya seperti:

npm remove @inertiajs/progress

Kemudian, lakukan beberapa perubahan.

- import { InertiaProgress } from '@inertiajs/progress'

- InertiaProgress.init()

Dan sekarang progress akan by default berada di dalam core inertia nya sendiri seperti:

createInertiaApp({
    progress: {
        color: "#38BDF8",
    },
    // ...
});

atau jika ingin menghapusnya bisa dengan:

createInertiaApp({
    progress: false,
    // ...
});

Yang diatas adalah guide jika Anda menggunakan react, jika Anda sedang menggunakan vue, maka bisa di sesuaikan sendiri. Atau bisa langsung lihat pada dokumentasi resmi nya disini.

Saat saya menulis artikel ini, laravel breeze dan jetstream belum upgrade ke versi 1, tapi ini tidak akan lama harusnya. Sebentar lagi juga akan di perbarui oleh tim laravel. Semoga informasi ini bermanfaat, saya Irsyad, sampai jumpa di artikel selanjutnya.