Laravel Jetstream (Vue/Inertia Flavor): <script setup> Syntax

[oberocks]

Hi everyone!

Ok been doing a few days now of tooling Jetstream Vue components to add in dark mode... and bumping things up to the Vue 3's Composition API syntax as well. This led me through a few cycles of tweaks to core Jetstream files.

No biggie, as I was really just doing my own thing, but then it occurred to me... I wonder if any of the future Laravel Jetstream versions are going this same direction, too?

Turns out that's a partial yes! 😄

But once I dug in a little deeper, I noticed the newest updates were going with the defineComponent() method. It's a good way to go, especially when first wrapping one's head around the new Vue 3 Composition API.

I already did that to set of Jetstream files as well! But then the YouTube algo gods recommended this Program with Erik video about the <script setup> syntax.

That led me to the official Vue 3 API docs, which actually do state that this is the preferred syntax if the app is already in the Composition API vernacular. So yeah... time to go through all those Jetstream files again! 😱

FF to today, and I'm mostly done now, so maybe I should just share them all or do a fork/branch/pr or something? I could pretty easily retrofit any mods I've made in my versions back to the default Jetstream files/functionalities, and just send you guys the updated JS blocks for each file. If you all like this sort of brevity, of course!

TwoFactorChallenge.vue Example

So just to illustrate the point, here's some Jetstream code from the newest updates by the (awesome) contributors so far:
https://github.com/laravel/jetstream/blob/2.x/stubs/inertia/resources/js/Pages/Auth/TwoFactorChallenge.vue

So here's the conversion of that same script block into the <script setup> syntax:

<script setup>
    import { nextTick, ref } from 'vue'
    import { Head as Head } from '@inertiajs/inertia-vue3'
    import JetAuthenticationCard from '@/Jetstream/AuthenticationCard'
    import JetAuthenticationCardLogo from '@/Jetstream/AuthenticationCardLogo'
    import JetButton from '@/Jetstream/Button'
    import JetInput from '@/Jetstream/Input'
    import JetLabel from '@/Jetstream/Label'
    import JetValidationErrors from '@/Jetstream/ValidationErrors'

    const code = ref(null)
    const recovery_code = ref(null)
    const recovery = ref(false)

    const form = Inertia.form({
        code: '',
        recovery_code: '',
    })

    function toggleRecovery () {

        recovery.value ^= true

        nextTick(() => {
            if (recovery.value) {
                form.code = ''
                recovery_code.value.focus()
            } else {
                form.recovery_code = ''
                code.value.focus()
            }
        })

    }

    function submit () {
        form.post(route('two-factor.login'))
    }
</script>

Notes:

• defineComponent() isn't needed with <script setup>
• The import ".vue" suffix also isn't needed, as it's pretty much implied in the "setup" attribute, which is designated to run a .vue file as a Composition API SPC, and also let's you grab a .js file as a normal ESM import. My personal taste here is to PascalCase all .vue component files and camelCase all .js files so I can drop the suffixes entirely.
• The complexity of the TwoFactorChallenge.vue component needs the nextTick() and ref() methods from vue
• The import { Head as Head } bit was needed to get my IDE (PHPStorm) to recognize the component whenever the import is de-structured
• The Inertia object takes care of the form
• Vue 3 Composition API refs are a bit awkward grammatically (ref(null))... but still clean - just need a null/[]/{} value to work as expected for template refs compared to the old way AFAIK
• Any ref() (and of course reactive()) variable needs to use the variable.value syntax for assignment and use
• Because everything in the <script setup> is flattened and scoped to the component instance, we don't even have to pass in the variable in either computed or listener functions!

Login.vue Example

Additionally, and just to give an example of the almighty props for our beloved Vue components, here's the most recent Jetstream Login.vue component code:
https://github.com/laravel/jetstream/blob/2.x/stubs/inertia/resources/js/Pages/Auth/Login.vue

And here's the script block in the Login.vue component linked above now in the <script setup> syntax:

<script setup>
    import { Inertia } from '@inertiajs/inertia'
    import { Head as Head, Link as Link } from '@inertiajs/inertia-vue3'
    import JetAuthenticationCard from '@/Jetstream/AuthenticationCard'
    import JetAuthenticationCardLogo from '@/Jetstream/AuthenticationCardLogo'
    import JetButton from '@/Jetstream/Button'
    import JetInput from '@/Jetstream/Input'
    import JetCheckbox from '@/Jetstream/Checkbox'
    import JetLabel from '@/Jetstream/Label'
    import JetValidationErrors from '@/Jetstream/ValidationErrors'

    const props = defineProps({
        canResetPassword: {
            type: Boolean,
        },
        status: {
            type: String,
        },
    })

    const form = Inertia.form({
        email: '',
        password: '',
        remember: false
    })

    function submit () {
        form.transform(data => ({
            ... data,
            remember: form.remember ? 'on' : ''
        }))
        .post(route('login'), {
            onFinish: () => form.reset('password'),
        })
    }
</script>

Notes:

• In this script setup syntax, props use the defineProps() method syntax
  • (and emits use the defineEmits(['update:modelValue', 'good:newsEveryone']) syntax)
• And any props are simply accessed through the props.propertyName syntax
• The import { Head as Head, Link as Link } bit was needed to get my IDE (PHPStorm) to recognize the component whenever the import is de-structured
• The Inertia object takes care of the form

The Catch

The only downside I can think of doing this to the Jetstream code base... is how it abstracts the way the new Vue 3 Composition API is structured... which kinda helped (me at least) to wrap my head around the CompAPI and the differences between Vue 2 and Vue 3 components in the first place!

So I worry that doing something like changing everything to the <script setup> syntax could possibly make it a little harder for a new to the VILT stack developer, to become productive and comfortable with files abstracted this much.

I suppose on the other hand though, the simplicity and more overt relationship between the <template> content and the <script setup> functionality happening through simple 1D variables - might make the abstraction worth it due to a cog-load reduction.

But I have to admit, I freaking ❤️ the script setup flavor... especially considering hundreds of project components. SPC's like this are border-line beautiful, and adding in emits, provides/injects etc are just as straight forward as the above examples are. So I hope you all like these, and maybe this really will become a norm in the post Vue 3 world like Erik claimed?

My past week has kinda convinced me that he might be right lol!

What you all think?

[crynobone]

Hey there,

We're closing this issue because it's inactive, already solved, old, or not relevant anymore. Feel free to open up a new issue if you're still experiencing this problem.

[oberocks]

Understood, thank you, and yeah... it's defs old.