Use Vuejs in blade template to conditionnally show block

Posted 1 year ago by Clement_Te


I have a Laravel app in which I'd like to introduce a bit of Vuejs to do some conditionnal templating in forms (show extra input fields depending on dropdown values, this type of stuff).

At first, I thought I could simply init a vue app and use v-model and v-if in my blade but I realize I need to specify the data() method with default values.

What would be best practices for my need if I don't want to use Vanilla or jQuery? My main concern is that my form can get quite big and I use Laravel Collective forms and handle form validations on the service-side with the errors bags.

  • Shall I create a vue component and put my whole form, or part of it inside, passing data and errors as props?
  • Shall I create a component that mainly displays a <slot></slot> and pass data as props and I should still be able to display the errors using blade?

Thank you for your advice. Good day

Please sign in or create an account to participate in this conversation.