Vue + Spark Walkthrough Screencast?

Okay, I'll do this one.

Awesome! Thank you. Looking forward to it!

I'm also a bit confused on this aspect, so big thumbs up for this one. :)

@JeffreyWay Could you please include instructions on how to add external modules to the Spark project as well? E.g. modules installed with npm install like vue-select2 or bootstrap-datepicker.

I think Vue itself is pretty straightforward, but IMO the way Taylor implemented it in Spark is bad, or at best, a bit strange.

@robmpreston Could you explain why the way from Taylor is bad / strange?

Looking forward to this as well.

Oh yeah looking forward to this. Tried to integrate my own vue-js component to Spark, but didn't get it to work. Would love to hear more about that!

Definitely! I'm sitting here right now being very confused about how to create a new view, following the way that it was implemented to begin with by Taylor. Documentation covers nothing about this either, making it even more confusing!

@christophrumpel What does not work? What did you tried? For me its working fine without problems.

@CmdrSharp Its quite easy. Just read a bit the docs @ https://spark.laravel.com/docs/1.0/quickstart#demo-application , https://spark.laravel.com/docs/1.0/client-customization#views & https://spark.laravel.com/docs/1.0/client-customization#adding-your-own-vue-components

So if you want to create a new view, just add your route & view blade file as you normally would. If you want to use Vue.js you can take a look at the resources/assets/js/components/home.js and the views/home.blade.php. Nothing special here.

@christopher For some reason I had completely missed that section! I guess I was too focused on the left sidebar and looking for a specific section about views, heh! Cheers!

I love this site. A request, an answer. Looking forward!

@christopher This is my approach that doesn't work. Would be great if you could help me because to me it isn't that clear. https://laracasts.com/discuss/channels/spark/spark-vueify-custom-vue-components

I don't want to sound impatient, but just curious if you might have any eta on this @JeffreyWay? I could really use more guidance as I start digging into this code. For example, I'm currently sitting here starring at app.js and wondering how this line of code works:

require('spark-bootstrap');

I watched enough videos to know that this has something to do with Browserify and how it lets you require modules like this. But I don't see where the source for this module exists anywhere in the code. Maybe I shouldn't being trying to understand how every little thing works, but I'm the type of person that needs to know how something is working in order to proceed and absorb the next thing in line. It's a fault of mine :/

Thanks in advance!

Having the same struggles @tptompkins - it is a great learning experience digging through the Spark code - but I am having trouble replicating even some small vue form implementations - looking forward to this lesson - thank you so much @JeffreyWay - so appreciate Laracasts !

Looking forward to this series too . . . maybe a Sparkify Project Flyer series.

@tptompkins

Maybe I shouldn't being trying to understand how every little thing works

IMHO, one should; it's not a fault - and that's where better source code commenting should be taking the strain

@tptompkins :

require('spark-bootstrap');

This tells Browserify to pull in spark-bootstrap.js which is located in /spark/resources/assets.js.

How does Browserify know to look there? If you look at your gulpfile.js you'll see:

.browserify('app.js', null, null, { paths: 'vendor/laravel/spark/resources/assets/js' })

How could you have figured this out on your own? Use your editor to do a file search for "spark-bootstrap"

Hope that helps.

Thanks @nlocascio. I did end up figuring this out eventually. Initially, I was doing a text search which didn't bring up anything for spark-bootstrap.

Yep, me confused too. Getting lost when trying to figure out where to add the vue instance and how it fits with the vue elements already present in Spark. Furthermore, is there another way to more quickly load a Vue component rather than using Browserify? Even with Gulp Watch it takes about 20 sec. to compile. Tried to call the custom component directly at the end of the HTML page. But it didn't work. Spark and Vue - a Walkthrough, please.

I have mine working (vue form) - but would like to better understand Taylor's way of putting it together - I like the style within Spark, but can't always replicate it.

Any ETA on when the video series will be coming out for spark / vue.js

Yes, a video/tutorial on how to create bundles with browserify/webpack would be great!

+1 for this request.

same here, watched all the laracast videos, read the documentation, still struggling with even just replicating a Your Settings style tabbed page to my dashboard, please help us!

Bump for an ETA @JeffreyWay

I was confused myself at first when working with Spark and Vue, and the way it had been implemented didn't seem to work the way Jeff showed in his various Vue series', especially with regard to importing other npm packages and the like. But now I am used to it and have figured out how it all works together, it really is well implemented and makes a lot of sense, particularly extending Spark Vue components, or creating your own.

I actually now really love working with it and frontend dev has become quite fun again. :-)

It would be good, though, if the documentation for Spark was a bit more comprehensive, but I understand it's early days and there's a lot of ground to cover.

I found great help in the Vue JS Gitter chat, https://gitter.im/vuejs/vue.

Really hoping to see this series soon, it would be wonderful to get a more in depth video guide to working with and modifying the Vue components of Spark (ie the settings screens)

+1 any news on that?

I know the guys are busy, but I haven't heard a peep about this so not sure if it's going to happen. I'm getting better with Vue, but I'd still really be interested in seeing this screencast.

I also would like a spark series if all possible @JefferyWay