inertiajs upgrade to 1.0

Author: balajidharma

package.json

@@ -5,9 +5,6 @@
         "build": "vite build"
     },
     "devDependencies": {
-        "@inertiajs/inertia": "^0.11.0",
-        "@inertiajs/inertia-vue3": "^0.6.0",
-        "@inertiajs/progress": "^0.2.7",
         "@mdi/js": "^7.0.96",
         "@tailwindcss/forms": "^0.5.2",
         "@tailwindcss/line-clamp": "^0.4.0",
@@ -23,5 +20,8 @@
         "tailwindcss": "^3.1.0",
         "vite": "^3.0.0",
         "vue": "^3.2.31"
+    },
+    "dependencies": {
+        "@inertiajs/vue3": "^1.0.0"
     }
 }

resources/js/Components/Admin/MenuItemList.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { Link } from '@inertiajs/inertia-vue3'
+import { Link } from '@inertiajs/vue3'
 
 defineProps({
     data: {

resources/js/Components/Admin/Pagination.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { ref, computed } from "vue"
-import { Link } from "@inertiajs/inertia-vue3"
+import { Link } from "@inertiajs/vue3"
 
 const props = defineProps({
   label: {

resources/js/Components/Admin/Sort.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { ref, computed } from 'vue'
-import { Link } from '@inertiajs/inertia-vue3'
+import { Link } from '@inertiajs/vue3'
 import { useStyleStore } from '@/Stores/style.js'
 import { mdiMinus, mdiPlus } from '@mdi/js'
 import { getButtonColor } from '@/colors.js'

resources/js/Components/AsideMenuItem.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { Inertia } from '@inertiajs/inertia'
+import { router } from '@inertiajs/vue3'
 import { mdiLogout, mdiClose } from '@mdi/js'
 import { computed } from 'vue'
 import { useLayoutStore } from '@/Stores/layout.js'
@@ -28,7 +28,7 @@ const logoutItem = computed(() => ({
 }))
 
 const logoutItemClick = () => {
-  Inertia.post(route('logout'))
+  router.post(route('logout'))
 }
 
 const menuClick = (event, item) => {

resources/js/Components/AsideMenuLayer.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { computed } from 'vue'
-import { Link } from '@inertiajs/inertia-vue3'
+import { Link } from '@inertiajs/vue3'
 import { getButtonColor } from '@/colors.js'
 import BaseIcon from '@/Components/BaseIcon.vue'
 

resources/js/Components/BaseButton.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { Link } from '@inertiajs/inertia-vue3';
+import { Link } from '@inertiajs/vue3';
 </script>
 
 <template>

resources/js/Components/DropdownLink.vue

@@ -1,9 +1,9 @@
 <script setup>
 import { computed } from 'vue'
-import { usePage } from '@inertiajs/inertia-vue3'
+import { usePage } from '@inertiajs/vue3'
 import NotificationBarInCard from '@/Components/NotificationBarInCard.vue'
 
-const errors = computed(() => usePage().props.value.errors)
+const errors = computed(() => usePage().props.errors)
 
 const hasErrors = computed(() => Object.keys(errors.value).length > 0)
 </script>

resources/js/Components/FormValidationErrors.vue

@@ -1,6 +1,5 @@
 <script setup>
-import { usePage } from '@inertiajs/inertia-vue3'
-import { Inertia } from '@inertiajs/inertia'
+import { usePage, router } from '@inertiajs/vue3'
 import { computed, ref } from 'vue'
 import { containerMaxW } from '@/config.js'
 import { useMainStore } from '@/Stores/main.js'
@@ -32,7 +31,7 @@ import NavBarSearch from '@/Components/NavBarSearch.vue'
 
 const mainStore = useMainStore()
 
-const userName = computed(() => usePage().props.value.auth.user.name)
+const userName = computed(() => usePage().props.auth.user.name)
 
 const styleStore = useStyleStore()
 
@@ -53,7 +52,7 @@ const menuOpenLg = () => {
 }
 
 const logout = () => {
-  Inertia.post(route('logout'))
+  router.post(route('logout'))
 }
 </script>