Building Sparkle ✨ for Laravel | Echo Labs | Curology

Apr 10, 2016

I believe there are some lessons on laracasts about this - link.

Matt Stauffer wrote a really good starter guide on the Tighten Blog about getting started with elixr and Vue - link

I would recommend using elixir and gulp to process a JavaScript file and include that in your blade layout and then you would just use blade as normal. Then you can just use Vue to target the elements inside of the view.

Janet Brown

PHP developer and Swift lover.

Apr 10, 2016

Thank you. Nice links. But they're just too basic. I'm looking for a way to handle multiple posts using Blade and VueJS (using @foreach to display the posts instead of v-for). Can't find a tutorial about this :(

Building Sparkle ✨ for Laravel | Echo Labs | Curology

Apr 10, 2016

So it sounds like you are looking to attach a Vue component to DOM that was already rendered be blade? I think Vue.extend is what you would need to use. I'm trying to find time to polish off my blog and maybe whip something together.

Janet Brown

PHP developer and Swift lover.

Apr 10, 2016

Yup! That's right! Using component is a good way. I'm using component for this task right now. But I really need a good tutorial about this to make sure that I'm doing the right way. Thank you so much! Eagerly awaiting your blog posts on this one.

Marcin Piekarski

Apr 12, 2016

@Janet - Have you tried using the Laravel @foreach to spit out the list and then add a component(s) for the up / down vote buttons?

Maybe something along the lines of:

@foreach ($items as $item) <li> <button-upvote up-count="$item->upCount"></button-upvote> <button-downvote down-count="$item-downCount"></button-downvote> $item->text </li> @endforeach

I'm working on a decent sized Laravel/Vue project at the moment. Dealing with similar questions on how to structure various components, etc.

Search Hashnode