[2.x] Upgrade VueJS to version 3

src/Console/InstallCommand.php

@@ -268,17 +268,16 @@ protected function installInertiaStack()
         // Install NPM packages...
         $this->updateNodePackages(function ($packages) {
             return [
-                '@inertiajs/inertia' => '^0.8.2',
-                '@inertiajs/inertia-vue' => '^0.5.4',
+                '@inertiajs/inertia' => '^0.8.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/ActionMessage.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <transition leave-active-class="transition ease-in duration-1000" leave-class="opacity-100" leave-to-class="opacity-0">
+        <transition leave-active-class="transition ease-in duration-1000" leave-from-class="opacity-100" leave-to-class="opacity-0">
             <div v-show="on" class="text-sm text-gray-600">
                 <slot />
             </div>

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

@@ -10,10 +10,10 @@
 
         <transition
             enter-active-class="transition ease-out duration-200"
-            enter-class="transform opacity-0 scale-95"
+            enter-from-class="transform opacity-0 scale-95"
             enter-to-class="transform opacity-100 scale-100"
             leave-active-class="transition ease-in duration-75"
-            leave-class="transform opacity-100 scale-100"
+            leave-from-class="transform opacity-100 scale-100"
             leave-to-class="transform opacity-0 scale-95">
             <div v-show="open"
                     class="absolute z-50 mt-2 rounded-md shadow-lg"
@@ -29,6 +29,8 @@
 </template>
 
 <script>
+import {onMounted, onUnmounted, ref} from "vue";
+
     export default {
         props: {
             align: {
@@ -42,24 +44,21 @@
             }
         },
 
-        data() {
-            return {
-                open: false
-            }
-        },
+        setup() {
+            let open = ref(false)
 
-        created() {
             const closeOnEscape = (e) => {
-                if (this.open && e.keyCode === 27) {
-                    this.open = false
+                if (open.value && e.keyCode === 27) {
+                    open.value = false
                 }
             }
 
-            this.$once('hook:destroyed', () => {
-                document.removeEventListener('keydown', closeOnEscape)
-            })
+            onMounted(() => document.addEventListener('keydown', closeOnEscape))
+            onUnmounted(() => document.removeEventListener('keydown', closeOnEscape))
 
-            document.addEventListener('keydown', closeOnEscape)
+            return {
+                open,
+            }
         },
 
         computed: {
@@ -68,7 +67,6 @@
                     '48': 'w-48',
                 }[this.width.toString()]
             },
-
             alignmentClasses() {
                 if (this.align === 'left') {
                     return 'origin-top-left left-0'

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,35 +1,39 @@
 <template>
-    <portal to="modal">
+    <teleport to="body">
         <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"
-                        enter-class="opacity-0"
+                        enter-from-class="opacity-0"
                         enter-to-class="opacity-100"
                         leave-active-class="ease-in duration-200"
-                        leave-class="opacity-100"
+                        leave-from-class="opacity-100"
                         leave-to-class="opacity-0">
                     <div v-show="show" class="fixed inset-0 transform transition-all" @click="close">
                         <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
                     </div>
                 </transition>
 
                 <transition enter-active-class="ease-out duration-300"
-                        enter-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                        enter-from-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                         enter-to-class="opacity-100 translate-y-0 sm:scale-100"
                         leave-active-class="ease-in duration-200"
-                        leave-class="opacity-100 translate-y-0 sm:scale-100"
+                        leave-from-class="opacity-100 translate-y-0 sm:scale-100"
                         leave-to-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
                     <div v-show="show" class="mb-6 bg-white rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full sm:mx-auto" :class="maxWidthClass">
                         <slot></slot>
                     </div>
                 </transition>
             </div>
         </transition>
-    </portal>
+    </teleport>
 </template>
 
 <script>
-    export default {
+import {onMounted, onUnmounted} from "vue";
+
+export default {
+        emits: ['close'],
+
         props: {
             show: {
                 default: false
@@ -42,14 +46,6 @@
             },
         },
 
-        methods: {
-            close() {
-                if (this.closeable) {
-                    this.$emit('close')
-                }
-            }
-        },
-
         watch: {
             show: {
                 immediate: true,
@@ -63,18 +59,25 @@
             }
         },
 
-        created() {
+        setup(props, {emit}) {
+            const close = () => {
+                if (props.closeable) {
+                    emit('close')
+                }
+            }
+
             const closeOnEscape = (e) => {
-                if (e.key === 'Escape' && this.show) {
-                    this.close()
+                if (e.key === 'Escape' && props.show) {
+                    close()
                 }
             }
 
-            document.addEventListener('keydown', closeOnEscape)
+            onMounted(() => document.addEventListener('keydown', closeOnEscape))
+            onUnmounted(() => document.removeEventListener('keydown', closeOnEscape))
 
-            this.$once('hook:destroyed', () => {
-                document.removeEventListener('keydown', closeOnEscape)
-            })
+            return {
+                close,
+            }
         },
 
         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/#.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);