Laravel: Using a mix between Blade and Vuejs

Question

I'm developing a website using Laravel and I will need a mix between Blade templates and Vuejs components.

Basically the requirements of the project state that in the customer pages we can only use Blade but in the admin pages we are free to use anything, so we will use Blade + Vuejs.

I know is possible to create a form in Blade, and then require or @include that form in any other Blade file. Is it also possible require that form inside a Vuejs component?

For example, Is it possible to do something like this:

<my-form-component>
      @include('path/to/blade/form')
</my-form-component>

Have you tried? :) Blade is basicaly just compiled to php files, so anything you write in blade is translated to plain php. If the above would work in php, it should work with blade. — Jite
– Jite, Commented Apr 24, 2018 at 14:01
Hey, thanks for your reply. Yes, I tried it, the only problem that I've found is how to bind the fields of the form. In the form I need to specify v-bind but if I require the same form in a "pure" Blade page, that form will have the v-bind directives even if they are not required. Is there any workaround to this? — TJ is too short
– TJ is too short, Commented Apr 24, 2018 at 15:03

Mohamed Akram · Accepted Answer · 2018-04-24 17:43:32Z

4

If you want just use vue js in blade template, you can definetely use, Hope you aware that blade and vue share similar syntax {{ }} for variable interpolation, to avoid vue and blade conflicting, you should add @ notations ex: @{{ .. }} so blade engine will skip it,

But if you want to use vuejs component and blade template mixing, you shouldnot do it..

answered Apr 24, 2018 at 17:43

Mohamed Akram

2,11716 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

TJ is too short Over a year ago

So is not a good idea to compose a "form component" using blade? (As the example in the question?)

Collectives™ on Stack Overflow

Laravel: Using a mix between Blade and Vuejs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related