[1.x] Switch to defineModel in Vue stubs (#285)

* [1.x] Switch to `defineModel` in Vue stubs * Update to Vue 3.4 * Update to Vue 3.4 * Restore prop validation and types Co-authored-by: Julius Kiekbusch <[email protected]> * Use `model` convention from docs * Formatting --------- Co-authored-by: Jess Archer <[email protected]> Co-authored-by: Julius Kiekbusch <[email protected]>
laravel · Jan 6, 2024 · 6856cd4 · 6856cd4
1 parent 347ddd6
commit 6856cd4
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 20 deletions.
diff --git a/src/Console/InstallsInertiaStacks.php b/src/Console/InstallsInertiaStacks.php
@@ -24,19 +24,19 @@ protected function installInertiaVueStack()
             return [
                 '@inertiajs/vue3' => '^1.0.0',
                 '@tailwindcss/forms' => '^0.5.3',
-                '@vitejs/plugin-vue' => '^4.5.0',
+                '@vitejs/plugin-vue' => '^5.0.0',
                 'autoprefixer' => '^10.4.12',
                 'postcss' => '^8.4.31',
                 'tailwindcss' => '^3.2.1',
-                'vue' => '^3.2.41',
+                'vue' => '^3.4.0',
             ] + $packages;
         });
 
         if ($this->option('typescript')) {
             $this->updateNodePackages(function ($packages) {
                 return [
                     'typescript' => '^5.0.2',
-                    'vue-tsc' => '^1.2.0',
+                    'vue-tsc' => '^1.8.27',
                 ] + $packages;
             });
         }
@@ -153,7 +153,7 @@ protected function installInertiaVueSsrStack()
     {
         $this->updateNodePackages(function ($packages) {
             return [
-                '@vue/server-renderer' => '^3.2.31',
+                '@vue/server-renderer' => '^3.4.0',
             ] + $packages;
         });
 

diff --git a/stubs/inertia-vue-ts/resources/js/Components/TextInput.vue b/stubs/inertia-vue-ts/resources/js/Components/TextInput.vue
@@ -1,11 +1,7 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue';
 
-defineProps<{
-    modelValue: string;
-}>();
-
-defineEmits(['update:modelValue']);
+const model = defineModel<string>({ required: true });
 
 const input = ref<HTMLInputElement | null>(null);
 
@@ -21,8 +17,7 @@ defineExpose({ focus: () => input.value?.focus() });
 <template>
     <input
         class="border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 rounded-md shadow-sm"
-        :value="modelValue"
-        @input="$emit('update:modelValue', ($event.target as HTMLInputElement).value)"
+        v-model="model"
         ref="input"
     />
 </template>
diff --git a/stubs/inertia-vue/resources/js/Components/TextInput.vue b/stubs/inertia-vue/resources/js/Components/TextInput.vue
@@ -1,15 +1,11 @@
 <script setup>
 import { onMounted, ref } from 'vue';
 
-defineProps({
-    modelValue: {
-        type: String,
-        required: true,
-    },
+const model = defineModel({
+    type: String,
+    required: true,
 });
 
-defineEmits(['update:modelValue']);
-
 const input = ref(null);
 
 onMounted(() => {
@@ -24,8 +20,7 @@ defineExpose({ focus: () => input.value.focus() });
 <template>
     <input
         class="border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 rounded-md shadow-sm"
-        :value="modelValue"
-        @input="$emit('update:modelValue', $event.target.value)"
+        v-model="model"
         ref="input"
     />
 </template>