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 disini 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.

1npm remove @inertiajs/inertia @inertiajs/inertia-react @inertiajs/progress @inertiajs/server
2
bashCopy

Kemudian, silakan install inertia dengan cara:

1npm install @inertiajs/react
2
bashCopy

Setelah itu, perlu beberapa perubahan seperti:

1- import { Inertia } from '@inertiajs/inertia'
2+ import { router } from '@inertiajs/react'
3
4- import createServer from '@inertiajs/server'
5+ import createServer from '@inertiajs/react/server'
6
7- import { createInertiaApp } from '@inertiajs/inertia-react'
8- import { App } from '@inertiajs/inertia-react'
9- import { app } from '@inertiajs/inertia-react'
10- import { InertiaApp } from '@inertiajs/inertia-react'
11+ import { createInertiaApp } from '@inertiajs/react'
12
13- import { usePage } from '@inertiajs/inertia-react'
14+ import { usePage } from '@inertiajs/react'
15
16- import { useForm } from '@inertiajs/inertia-react'
17+ import { useForm } from '@inertiajs/react'
18
19- import { useRemember } from '@inertiajs/inertia-react'
20- import { useRememberedState } from '@inertiajs/inertia-react'
21+ import { useRemember } from '@inertiajs/react'
22
23- import { Head } from '@inertiajs/inertia-react'
24- import { InertiaHead } from '@inertiajs/inertia-react'
25+ import { Head } from '@inertiajs/react'
26
27- import { Link } from '@inertiajs/inertia-react'
28- import { link } from '@inertiajs/inertia-react'
29- import { InertiaLink } from '@inertiajs/inertia-react'
30+ import { Link } from '@inertiajs/react'
31
jsxCopy

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

1npm remove @inertiajs/progress
2
bashCopy

Kemudian, lakukan beberapa perubahan.

1- import { InertiaProgress } from '@inertiajs/progress'
2
3- InertiaProgress.init()
4
jsxCopy

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

1createInertiaApp({
2    progress: {
3        color: "#38BDF8",
4    },
5    // ...
6});
7
jsxCopy

atau jika ingin menghapusnya bisa dengan:

1createInertiaApp({
2    progress: false,
3    // ...
4});
5
jsxCopy

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.