build(deps-dev): upgrade inertiajs to 1.0.0

package.json

@@ -12,9 +12,7 @@
         "@alpinejs/persist": "^3.10.5",
         "@ckpack/vue-color": "^1.3.0",
         "@headlessui/vue": "^1.7.7",
-        "@inertiajs/inertia": "^0.11.1",
-        "@inertiajs/inertia-vue3": "^0.6.0",
-        "@inertiajs/progress": "^0.2.7",
+        "@inertiajs/vue3": "^1.0.0",
         "@tailwindcss/aspect-ratio": "^0.4.2",
         "@tailwindcss/forms": "^0.5.3",
         "@tailwindcss/line-clamp": "^0.4.2",

resources/js/admin.js

@@ -1,11 +1,10 @@
 import { createApp, h } from 'vue';
-import { createInertiaApp, Head, Link } from '@inertiajs/inertia-vue3';
+import { createInertiaApp, Head, Link } from '@inertiajs/vue3';
 import { ZiggyVue } from 'ziggy-js/dist/vue';
 import mitt from 'mitt';
 import VueClickAway from 'vue3-click-away';
 
 import registerComponents from '@/plugins/registerComponents';
-import progress from '@/plugins/progress';
 import i18n from '@/plugins/i18n';
 
 import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
@@ -18,17 +17,22 @@ createInertiaApp({
             `./pages/${name}.vue`,
             import.meta.globEager('./pages/**/*.vue')
         ),
-    setup({ el, app, props, plugin }) {
-        createApp({ render: () => h(app, props) })
+    setup({ el, App, props, plugin }) {
+        createApp({ render: () => h(App, props) })
             .use(ZiggyVue)
             .use(i18n)
             .use(plugin)
             .use(registerComponents)
-            .use(progress)
             .use(VueClickAway)
             .component('InertiaHead', Head)
             .component('InertiaLink', Link)
             .provide('bus', mitt())
             .mount(el);
     },
+    progress: {
+        delay: 250,
+        color: '#3B82F6',
+        includeCSS: true,
+        showSpinner: true,
+    },
 });

resources/js/components/Blocks/BlockItem.vue

@@ -127,7 +127,7 @@
 
 <script>
     import { computed, ref } from 'vue';
-    import { usePage } from '@inertiajs/inertia-vue3';
+    import { usePage } from '@inertiajs/vue3';
     import { useLocale } from '@/helpers';
     import get from 'lodash/get';
 
@@ -186,7 +186,7 @@
             );
 
             const icon = computed(() => {
-                const block = usePage().props.value.model.allowed_blocks.find(
+                const block = usePage().props.model.allowed_blocks.find(
                     ({ type }) => type === props.component
                 );
 

resources/js/components/Blocks/BlockList.vue

@@ -86,7 +86,7 @@
 
 <script>
     import { computed } from 'vue';
-    import { usePage } from '@inertiajs/inertia-vue3';
+    import { usePage } from '@inertiajs/vue3';
     import cloneDeep from 'lodash/cloneDeep';
     import Draggable from 'vuedraggable';
 
@@ -116,7 +116,7 @@
         emits: ['update:blocks'],
         setup(props) {
             const allowedBlocks = computed(
-                () => usePage().props.value.model.allowed_blocks
+                () => usePage().props.model.allowed_blocks
             );
 
             const addBlock = (type) => {

resources/js/components/FlashToast.vue

@@ -63,7 +63,7 @@
 
 <script>
     import { watch, computed, ref, nextTick } from 'vue';
-    import { usePage } from '@inertiajs/inertia-vue3';
+    import { usePage } from '@inertiajs/vue3';
     import { transChoice } from 'laravel-vue-i18n';
 
     import isEmpty from 'lodash/isEmpty';
@@ -87,8 +87,8 @@
                 setTimeout(hide, props.closeAfter);
             };
 
-            const flash = computed(() => usePage().props.value.flash);
-            const errors = computed(() => usePage().props.value.errors);
+            const flash = computed(() => usePage().props.flash);
+            const errors = computed(() => usePage().props.errors);
 
             watch(
                 [flash, errors],

resources/js/components/Form/Container.vue

@@ -72,7 +72,7 @@
     import { computed, onUnmounted, watch } from 'vue';
     import { useForm, useLocale, route } from '@/helpers';
     import { trans } from 'laravel-vue-i18n';
-    import { Inertia } from '@inertiajs/inertia';
+    import { router } from '@inertiajs/vue3';
 
     export default {
         name: 'FormContainer',
@@ -163,7 +163,7 @@
              * @see https://inertiajs.com/events#removing-listeners
              */
             onUnmounted(
-                Inertia.on('before', (event) => {
+                router.on('before', (event) => {
                     if (
                         form.isDirty &&
                         event.detail.visit.method === 'get' &&

resources/js/components/Form/Field.vue

@@ -52,7 +52,7 @@
 
 <script>
     import { computed } from 'vue';
-    import { usePage } from '@inertiajs/inertia-vue3';
+    import { usePage } from '@inertiajs/vue3';
     import { defineInput, useLocale } from '@/helpers';
 
     export default defineInput({
@@ -67,7 +67,7 @@
             const { hasMultipleLocales, nextLocale } = useLocale(props);
 
             const errors = computed(() => {
-                const initialErrors = usePage().props.value.errors;
+                const initialErrors = usePage().props.errors;
 
                 if (!props.locale && initialErrors.hasOwnProperty(props.name)) {
                     return [initialErrors[props.name]];

resources/js/components/Layout/Authenticated.vue

@@ -73,7 +73,7 @@
 
 <script>
     import { computed } from 'vue';
-    import { usePage } from '@inertiajs/inertia-vue3';
+    import { usePage } from '@inertiajs/vue3';
     import { route } from '@/helpers';
     import { isLoaded } from 'laravel-vue-i18n';
 
@@ -104,15 +104,15 @@
                 });
 
             const mainMenu = computed(() =>
-                buildMenu(usePage().props.value.navigation.primary)
+                buildMenu(usePage().props.navigation.primary)
             );
 
             const secondaryMenu = computed(() =>
-                buildMenu(usePage().props.value.navigation.secondary)
+                buildMenu(usePage().props.navigation.secondary)
             );
 
             const settingsMenu = computed(() =>
-                buildMenu(usePage().props.value.navigation.settings)
+                buildMenu(usePage().props.navigation.settings)
             );
 
             return {

resources/js/components/Media/Uploader.vue

@@ -57,7 +57,7 @@
 
 <script>
     import { ref, computed } from 'vue';
-    import { usePage } from '@inertiajs/inertia-vue3';
+    import { usePage } from '@inertiajs/vue3';
     import { useDropZone } from '@vueuse/core';
 
     export default {
@@ -72,20 +72,18 @@
         emits: ['upload'],
         setup(props, { emit }) {
             const allowedExtensions = computed(() =>
-                usePage().props.value.mediaLibrary.allowedExtensions[
+                usePage().props.mediaLibrary.allowedExtensions[
                     props.currentType
                 ].join(', ')
             );
 
             const allowedMimeTypes = computed(
                 () =>
-                    usePage().props.value.mediaLibrary.allowedMimeTypes[
-                        props.currentType
-                    ]
+                    usePage().props.mediaLibrary.allowedMimeTypes[props.currentType]
             );
 
             const maxFileSize = computed(
-                () => usePage().props.value.mediaLibrary.maxFileSize
+                () => usePage().props.mediaLibrary.maxFileSize
             );
 
             const dropzone = ref(null);

resources/js/components/MenuBuilder/Item.vue

@@ -129,7 +129,7 @@
 
 <script>
     import { computed, ref, watch } from 'vue';
-    import { usePage } from '@inertiajs/inertia-vue3';
+    import { usePage } from '@inertiajs/vue3';
     import { useLocale } from '@/helpers';
     import { trans } from 'laravel-vue-i18n';
     import get from 'lodash/get';
@@ -167,21 +167,21 @@
             const { currentLocale } = useLocale();
 
             const types = computed(() =>
-                (usePage().props.value.types || []).map((type) => ({
+                (usePage().props.types || []).map((type) => ({
                     value: type,
                     label: trans(`menu.item.${type}`),
                 }))
             );
 
             const routes = computed(() =>
-                (usePage().props.value.routes || []).map((route) => ({
+                (usePage().props.routes || []).map((route) => ({
                     value: route,
                     label: trans(`menu.item.${route}`),
                 }))
             );
 
             const models = computed(
-                () => usePage().props.value.models[props.item.type] || []
+                () => usePage().props.models[props.item.type] || []
             );
 
             const itemLabel = computed(() =>
@@ -201,7 +201,7 @@
             const prefix = computed(() => `${props.prefix}.${props.index}`);
 
             const errors = computed(() => {
-                const initialErrors = usePage().props.value.errors;
+                const initialErrors = usePage().props.errors;
                 const errors = {};
 
                 Object.keys(initialErrors).forEach((key) => {