Developer. Blogger. Musician.

28 February 2017

When I accidentally turned my first Laravel project into a Vue-driven SPA...

One month ago I decided it was about time to learn something new. I figured to give Laravel a try and got myself a copy of the code to explore it a little bit. Soon I found myself playing around with the code, so I setup a project for testing purposes. Inspired by a school project I had to do, I went with the concept of a garage sale. This way the project would have a couple of models, views and controllers, but it would also have authentication and internal messaging.

Curious but lazy

I immediately started to work on my project learning a lot of facets about the framework and everything went well until I wanted to use JavaScript. It's not like I suddenly forgot how to use it, but there was something odd about how it was set up. The main JavaScript file was not empty contrary to my expectation and it even contained this weird piece of code I had never seen. Apparently, as the comments said, it had something to do with Vue.js. As I didn't know this "Vue.js" thing I initially ignored it and started to write my own JavaScript under it. However, for some reason I kept getting bothered by the unnerving presence of this small piece of "Vue" code.

As my JavaScript file was getting bigger and bigger I felt more and more inclined to use something more structured. Could that small piece of "Vue" code be my hero? I decided to look it up and I soon came to the conclusion that Vue.js was indeed a front-end framework, much like Angular or React. I had never worked before with a front-end library other than jQuery and it made big points about its ease-of-use and light-weightiness, so I gave it a chance. I read up on it and before I knew it I was spending a few days learning Vue.js.

The Vue way...

Learning Vue.js was everything but smooth, though. Doing it my way was not at all doing it "The Vue way". On top of that, I had to learn how to integrate this functionality with Laravel. After some trial and error I finally got the basics working. Unfortunately, that was also where my first compatibility problem with Laravel occurred. To explain it as simple as possible: I needed to be able to reach the database from a Vue file. The problem is that Vue files can't get access to the data the "normal" way. What I needed to do was make my data delivery "Vue friendly". This ultimately meant translating the data responses from normal responses to JSON responses.

After this, I thought I was done with "vuefying" my original Laravel website. But another problem occurred. Basically, vuefying the way my data got delivered messed up my routing. I went back to the Laravel and Vue documentation for a possible solution and I found one. Vue had something called a vue-router. Thanks to this I could show Vue components as pages. This, however would mean I would have to rework my whole Laravel views system. But I had some extra time on my hands, so I just went all in. After the migration was done I was nervous for the result but surprisingly the vue-router did it's job and tied all my pages nicely together.

At this point I was using Vue.js, vue-resource (later axios) and vue-router to power the front-end of my website. It was also only now that I started to realize that I accidentally turned my Laravel powered website into a vuefied SPA machine. And I can tell you that I was sitting there for a while admiring what I had made, wondering on which planet I was living all that time.

...or no way

I thought it was an interesting situation as this was not my intention at all. It sparked my love for both Laravel and Vue.js. I feel that the folks at Laravel have a good taste in what's valuable in the market right now and it certainly showed with their seamless integration of Vue.js. I'm even considering using this combination over Wix for my next big project.

Thanks for reading.

Btw, here is the link to my github repo if you're interested in learning Laravel as well.

Back to top ⤴