Use defineComponent for easier typescript setup

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

@@ -9,7 +9,9 @@
 </template>
 
 <script>
-    export default {
+    import { defineComponent } from 'vue'
+
+    export default defineComponent({
         props: ['on'],
-    }
+    })
 </script>

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

@@ -14,11 +14,12 @@
 </template>
 
 <script>
+    import { defineComponent } from 'vue'
     import JetSectionTitle from './SectionTitle.vue'
 
-    export default {
+    export default defineComponent({
         components: {
             JetSectionTitle,
         }
-    }
+    })
 </script>

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

@@ -8,11 +8,12 @@
 </template>
 
 <script>
+    import { defineComponent } from 'vue'
     import { Link } from '@inertiajs/inertia-vue3';
 
-    export default {
+    export default defineComponent({
         components: {
             Link,
         },
-    }
+    })
 </script>

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

@@ -38,7 +38,9 @@
 </template>
 
 <script>
-    export default {
+    import { defineComponent } from 'vue'
+
+    export default defineComponent({
         data() {
             return {
                 show: true,
@@ -54,5 +56,5 @@
                 return this.$page.props.jetstream.flash?.banner || ''
             },
         }
-    }
+    })
 </script>

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

@@ -5,12 +5,14 @@
 </template>
 
 <script>
-    export default {
+    import { defineComponent } from 'vue'
+
+    export default defineComponent({
         props: {
             type: {
                 type: String,
                 default: 'submit',
             },
         }
-    }
+    })
 </script>

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

@@ -4,7 +4,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from 'vue'
+
+export default defineComponent({
     emits: ['update:checked'],
 
     props: {
@@ -28,5 +30,5 @@ export default {
             },
         },
     },
-}
+})
 </script>

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

@@ -28,9 +28,10 @@
 </template>
 
 <script>
+    import { defineComponent } from 'vue'
     import Modal from './Modal.vue'
 
-    export default {
+    export default defineComponent({
         emits: ['close'],
 
         components: {
@@ -54,5 +55,5 @@
                 this.$emit('close')
             },
         }
-    }
+    })
 </script>

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

@@ -36,13 +36,14 @@
 </template>
 
 <script>
+    import { defineComponent } from 'vue'
     import JetButton from './Button.vue'
     import JetDialogModal from './DialogModal.vue'
     import JetInput from './Input.vue'
     import JetInputError from './InputError.vue'
     import JetSecondaryButton from './SecondaryButton.vue'
 
-    export default {
+    export default defineComponent({
         emits: ['confirmed'],
 
         props: {
@@ -110,5 +111,5 @@
                 this.form.error = '';
             },
         }
-    }
+    })
 </script>

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

@@ -5,12 +5,14 @@
 </template>
 
 <script>
-    export default {
+    import { defineComponent } from 'vue'
+
+    export default defineComponent({
         props: {
             type: {
                 type: String,
                 default: 'button',
             },
         }
-    }
+    })
 </script>

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

@@ -20,9 +20,10 @@
 </template>
 
 <script>
+    import { defineComponent } from 'vue'
     import Modal from './Modal.vue'
 
-    export default {
+    export default defineComponent({
         emits: ['close'],
 
         components: {
@@ -46,5 +47,5 @@
                 this.$emit('close')
             },
         }
-    }
+    })
 </script>

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

@@ -29,9 +29,9 @@
 </template>
 
 <script>
-import { onMounted, onUnmounted, ref } from "vue";
+import { defineComponent, onMounted, onUnmounted, ref } from "vue";
 
-export default {
+export default defineComponent({
     props: {
         align: {
             default: 'right'
@@ -78,5 +78,5 @@ export default {
             }
         },
     }
-}
+})
 </script>

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

@@ -15,12 +15,13 @@
 </template>
 
 <script>
+    import { defineComponent } from 'vue';
     import { Link } from '@inertiajs/inertia-vue3';
 
-    export default {
+    export default defineComponent({
         components: {
             Link,
         },
         props: ['href', 'as']
-    }
+    })
 </script>

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

@@ -23,9 +23,10 @@
 </template>
 
 <script>
+    import { defineComponent } from 'vue'
     import JetSectionTitle from './SectionTitle.vue'
 
-    export default {
+    export default defineComponent({
         emits: ['submitted'],
 
         components: {
@@ -37,5 +38,5 @@
                 return !! this.$slots.actions
             }
         }
-    }
+    })
 </script>

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

@@ -3,7 +3,9 @@
 </template>
 
 <script>
-    export default {
+    import { defineComponent } from 'vue'
+
+    export default defineComponent({
         props: ['modelValue'],
 
         emits: ['update:modelValue'],
@@ -13,6 +15,5 @@
                 this.$refs.input.focus()
             }
         }
-    }
+    })
 </script>
-

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

@@ -7,7 +7,9 @@
 </template>
 
 <script>
-    export default {
+    import { defineComponent } from 'vue'
+
+    export default defineComponent({
         props: ['message']
-    }
+    })
 </script>

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

@@ -6,7 +6,9 @@
 </template>
 
 <script>
-    export default {
+    import { defineComponent } from 'vue'
+
+    export default defineComponent({
         props: ['value']
-    }
+    })
 </script>

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

@@ -29,9 +29,9 @@
 </template>
 
 <script>
-import { onMounted, onUnmounted } from "vue";
+import { defineComponent, onMounted, onUnmounted } from "vue";
 
-export default {
+export default defineComponent({
         emits: ['close'],
 
         props: {
@@ -94,5 +94,5 @@ export default {
                 }[this.maxWidth]
             }
         }
-    }
+    })
 </script>

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

@@ -5,9 +5,10 @@
 </template>
 
 <script>
+    import { defineComponent } from 'vue'
     import { Link } from '@inertiajs/inertia-vue3';
 
-    export default {
+    export default defineComponent({
         components: {
             Link,
         },
@@ -20,5 +21,5 @@
                     : 'inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300 transition'
             }
         }
-    }
+    })
 </script>

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

@@ -11,9 +11,10 @@
 </template>
 
 <script>
+    import { defineComponent } from 'vue';
     import { Link } from '@inertiajs/inertia-vue3';
 
-    export default {
+    export default defineComponent({
         components: {
             Link,
         },
@@ -26,5 +27,5 @@
                     : 'block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300 focus:outline-none focus:text-gray-800 focus:bg-gray-50 focus:border-gray-300 transition'
             }
         }
-    }
+    })
 </script>

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

@@ -5,12 +5,14 @@
 </template>
 
 <script>
-    export default {
+    import { defineComponent } from 'vue'
+
+    export default defineComponent({
         props: {
             type: {
                 type: String,
                 default: 'button',
             },
         }
-    }
+    })
 </script>

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

@@ -9,7 +9,9 @@
 </template>
 
 <script>
-    export default {
+    import { defineComponent } from 'vue'
+
+    export default defineComponent({
         computed: {
             errors() {
                 return this.$page.props.errors
@@ -19,5 +21,5 @@
                 return Object.keys(this.errors).length > 0;
             },
         }
-    }
+    })
 </script>

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

@@ -94,11 +94,12 @@
 </template>
 
 <script>
+    import { defineComponent } from 'vue'
     import JetApplicationLogo from '@/Jetstream/ApplicationLogo.vue'
 
-    export default {
+    export default defineComponent({
         components: {
             JetApplicationLogo,
         },
-    }
+    })
 </script>