[2.x] Upgrade VueJS to version 3

src/Console/InstallCommand.php

@@ -269,16 +269,15 @@ protected function installInertiaStack()
         $this->updateNodePackages(function ($packages) {
             return [
                 '@inertiajs/inertia' => '^0.8.2',
-                '@inertiajs/inertia-vue' => '^0.5.4',
+                '@inertiajs/inertia-vue3' => '^0.3.5',
                 '@tailwindcss/forms' => '^0.2.1',
                 '@tailwindcss/typography' => '^0.3.0',
-                'portal-vue' => '^2.1.7',
                 'postcss-import' => '^12.0.1',
                 'tailwindcss' => '^2.0.1',
                 'autoprefixer' => '^10.0.2',
-                'vue' => '^2.5.17',
-                'vue-loader' => '^15.9.6',
-                'vue-template-compiler' => '^2.6.10',
+                'vue' => '^3.0.5',
+                '@vue/compiler-sfc' => '^3.0.5',
+                'vue-loader' => '^16.1.2',
             ] + $packages;
         });
 

stubs/inertia/resources/js/Jetstream/Checkbox.vue

@@ -4,32 +4,28 @@
 </template>
 
 <script>
-    export default {
-        model: {
-            prop: "checked",
-            event: "change",
-        },
+export default {
+    emits: ['update:checked'],
 
-        props: {
-            checked: {
-                type: [Array, Boolean],
-                default: false,
-            },
-            value: {
-                default: null,
-            },
+    props: {
+        checked: {
+            type: [Array, Boolean],
+            default: false,
         },
+        value: {
+            default: null,
+        },
+    },
 
-        computed: {
-            proxyChecked: {
-                get() {
-                    return this.checked;
-                },
-                set(val) {
-                    this.$emit("change", val);
-                },
+    computed: {
+        proxyChecked: {
+            get() {
+                return this.checked;
+            },
+            set(val) {
+                this.$emit("update:checked", val);
             },
         },
-    }
+    },
+}
 </script>
-

stubs/inertia/resources/js/Jetstream/ConfirmationModal.vue

@@ -31,6 +31,8 @@
     import Modal from './Modal'
 
     export default {
+        emits: ['close'],
+
         components: {
             Modal,
         },

stubs/inertia/resources/js/Jetstream/ConfirmsPassword.vue

@@ -43,6 +43,8 @@
     import JetSecondaryButton from './SecondaryButton'
 
     export default {
+        emits: ['confirmed'],
+
         props: {
             title: {
                 default: 'Confirm Password',

stubs/inertia/resources/js/Jetstream/DialogModal.vue

@@ -23,6 +23,8 @@
     import Modal from './Modal'
 
     export default {
+        emits: ['close'],
+
         components: {
             Modal,
         },

stubs/inertia/resources/js/Jetstream/Dropdown.vue

@@ -55,10 +55,6 @@
                 }
             }
 
-            this.$once('hook:destroyed', () => {
-                document.removeEventListener('keydown', closeOnEscape)
-            })
-
             document.addEventListener('keydown', closeOnEscape)
         },
 

stubs/inertia/resources/js/Jetstream/FormSection.vue

@@ -27,6 +27,8 @@
     import JetSectionTitle from './SectionTitle'
 
     export default {
+        emits: ['submitted'],
+
         components: {
             JetSectionTitle,
         },

stubs/inertia/resources/js/Jetstream/Input.vue

@@ -1,10 +1,12 @@
 <template>
-    <input class="border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm" :value="value" @input="$emit('input', $event.target.value)" ref="input">
+    <input class="border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" ref="input">
 </template>
 
 <script>
     export default {
-        props: ['value'],
+        props: ['modelValue'],
+
+        emits: ['update:modelValue'],
 
         methods: {
             focus() {

stubs/inertia/resources/js/Jetstream/Modal.vue

@@ -1,5 +1,5 @@
 <template>
-    <portal to="modal">
+    <Teleport to="#modal">
         <transition leave-active-class="duration-200">
             <div v-show="show" class="fixed inset-0 overflow-y-auto px-4 py-6 sm:px-0 z-50">
                 <transition enter-active-class="ease-out duration-300"
@@ -25,11 +25,13 @@
                 </transition>
             </div>
         </transition>
-    </portal>
+    </Teleport>
 </template>
 
 <script>
     export default {
+        emits: ['close'],
+
         props: {
             show: {
                 default: false
@@ -71,10 +73,6 @@
             }
 
             document.addEventListener('keydown', closeOnEscape)
-
-            this.$once('hook:destroyed', () => {
-                document.removeEventListener('keydown', closeOnEscape)
-            })
         },
 
         computed: {

stubs/inertia/resources/js/Layouts/AppLayout.vue

@@ -63,8 +63,8 @@
                                                     Switch Teams
                                                 </div>
 
-                                                <template v-for="team in $page.props.user.all_teams">
-                                                    <form @submit.prevent="switchToTeam(team)" :key="team.id">
+                                                <template v-for="team in $page.props.user.all_teams" :key="team.id">
+                                                    <form @submit.prevent="switchToTeam(team)">
                                                         <jet-dropdown-link as="button">
                                                             <div class="flex items-center">
                                                                 <svg v-if="team.id == $page.props.user.current_team_id" class="mr-2 h-5 w-5 text-green-400" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewBox="0 0 24 24"><path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
@@ -198,8 +198,8 @@
                                     Switch Teams
                                 </div>
 
-                                <template v-for="team in $page.props.user.all_teams">
-                                    <form @submit.prevent="switchToTeam(team)" :key="team.id">
+                                <template v-for="team in $page.props.user.all_teams" :key="team.id">
+                                    <form @submit.prevent="switchToTeam(team)">
                                         <jet-responsive-nav-link as="button">
                                             <div class="flex items-center">
                                                 <svg v-if="team.id == $page.props.user.current_team_id" class="mr-2 h-5 w-5 text-green-400" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewBox="0 0 24 24"><path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
@@ -225,10 +225,6 @@
             <main>
                 <slot></slot>
             </main>
-
-            <!-- Modal Portal -->
-            <portal-target name="modal" multiple>
-            </portal-target>
         </div>
     </div>
 </template>

stubs/inertia/resources/js/Pages/API/ApiTokenManager.vue

@@ -25,7 +25,7 @@
                     <div class="mt-2 grid grid-cols-1 md:grid-cols-2 gap-4">
                         <div v-for="permission in availablePermissions" :key="permission">
                             <label class="flex items-center">
-                                <jet-checkbox :value="permission" v-model="createApiTokenForm.permissions"/>
+                                <jet-checkbox :value="permission" v-model:checked="createApiTokenForm.permissions"/>
                                 <span class="ml-2 text-sm text-gray-600">{{ permission }}</span>
                             </label>
                         </div>
@@ -122,7 +122,7 @@
                 <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                     <div v-for="permission in availablePermissions" :key="permission">
                         <label class="flex items-center">
-                            <jet-checkbox :value="permission" v-model="updateApiTokenForm.permissions"/>
+                            <jet-checkbox :value="permission" v-model:checked="updateApiTokenForm.permissions"/>
                             <span class="ml-2 text-sm text-gray-600">{{ permission }}</span>
                         </label>
                     </div>

stubs/inertia/resources/js/Pages/Auth/Login.vue

@@ -23,7 +23,7 @@
 
             <div class="block mt-4">
                 <label class="flex items-center">
-                    <jet-checkbox name="remember" v-model="form.remember" />
+                    <jet-checkbox name="remember" v-model:checked="form.remember" />
                     <span class="ml-2 text-sm text-gray-600">Remember me</span>
                 </label>
             </div>

stubs/inertia/resources/js/Pages/Auth/Register.vue

@@ -30,7 +30,7 @@
             <div class="mt-4" v-if="$page.props.jetstream.hasTermsAndPrivacyPolicyFeature">
                 <jet-label for="terms">
                     <div class="flex items-center">
-                        <jet-checkbox name="terms" id="terms" v-model="form.terms" />
+                        <jet-checkbox name="terms" id="terms" v-model:checked="form.terms"/>
 
                         <div class="ml-2">
                             I agree to the <a target="_blank" :href="route('terms.show')" class="underline text-sm text-gray-600 hover:text-gray-900">Terms of Service</a> and <a target="_blank" :href="route('policy.show')" class="underline text-sm text-gray-600 hover:text-gray-900">Privacy Policy</a>

stubs/inertia/resources/js/app.js

@@ -1,22 +1,18 @@
 require('./bootstrap');
 
 // Import modules...
-import Vue from 'vue';
-import { App as InertiaApp, plugin as InertiaPlugin } from '@inertiajs/inertia-vue';
-import PortalVue from 'portal-vue';
+import { createApp, h } from 'vue';
+import { App as InertiaApp, plugin as InertiaPlugin } from '@inertiajs/inertia-vue3';
 
-Vue.mixin({ methods: { route } });
-Vue.use(InertiaPlugin);
-Vue.use(PortalVue);
+const el = document.getElementById('app');
 
-const app = document.getElementById('app');
-
-new Vue({
-    render: (h) =>
+createApp({
+    render: () =>
         h(InertiaApp, {
-            props: {
-                initialPage: JSON.parse(app.dataset.page),
-                resolveComponent: (name) => require(`./Pages/${name}`).default,
-            },
+            initialPage: JSON.parse(el.dataset.page),
+            resolveComponent: (name) => require(`./Pages/${name}`).default,
         }),
-}).$mount(app);
+})
+    .mixin({ methods: { route } })
+    .use(InertiaPlugin)
+    .mount(el);

stubs/inertia/resources/views/app.blade.php

@@ -19,5 +19,8 @@
     </head>
     <body class="font-sans antialiased">
         @inertia
+
+        <!-- Modal Teleport -->
+        <div id="modal"></div>
     </body>
 </html>