Laravel 5.3 For Beginners Updated for Vue 2

Access all articles in sprocket icon.

Published October 23, 2016 by Bill Keck.

Laravel 5.3 For Beginners Updated for Vue 2

I’m happy to announce that Laravel 5.3 has been updated to use Vue 2.0.1, which is the current release of Vue.js. I’ve also added a couple of chapters that cover basic and advanced use of Foundation Maker, a free artisan plugin, giving you new artisan commands for code generation.

Updates to the book are free for the life of the book, just log in to your Leanpub.com account, and pull down the latest copy.

The update to Vue 2 was a hectic one for me, it came just as I released the first version of Foundation Maker, so I really had to scramble to not only update the plugin, but also the book.

One issue that came up was that I was unsuccessful in trying to update an earlier version of Laravel, 5.3.10. For some reason I couldn’t get that to work with Vue 2, so I ended up pulling a new install of Laravel, which was on version 5.3.18. Laravel started shipping Vue 2.01 as of Laravel version 5.3.16.

I have quite a few readers who will be caught in the transition, which is why I’m talking about it here. If you are not yet to chapter 11, and you are working with an install of Laravel that is below 5.3.16, then I would recommend doing a fresh install, and quickly copying the work you have already done into the new version. Otherwise the code from chapter 11 on will not work. Sometimes updating is a bit of a pain, but it’s worth it and you will not be disappointed. In the book, we build a fully searchable, sortable, and paginated data grid using Vue 2.

If you want to check the version of Laravel you are using, you can run the following artisan command:



php artisan -V

Staying current on a new release like Vue 2 is very important, in my opinion. There’s no sense in learning a new javascript framework if you are learning on a version that is already outdated. So that was a huge motivator for me to put in the long days and nights to get this update out to you.

The book is now over 700 pages in length. For those unfamiliar with the book, we cover the basics of REST with a front-end and back-end sample app, Socialite and Facebook one-click registration and login, Image management, admin access control, data grids with Vue 2, Foundation Maker, and charts with Charts.js and Vue.js. The book starts at the beginner level and moves towards a more intermediate level with Elixir, node.js and vue.js.

Thanks to everyone who has and is supporting my work. I don’t have a donate button, but if you would like to contribute, you may do so by buying one of my books, I would really appreciate it. Shares, comments, likes, and book reviews are also greatly appreciated. See you soon.

vue.js paginated datagrid powered by ajax and Laravel 5.2

Access all tutorials in sprocket icon.

Published May 9, 2016 by Bill Keck.

I’ve been working on ViewMaker, which is a free plugin for Laravel artisan, and one of my main objectives with the make:foundation command was to stand up a working datagrid that was fed by an ajax call with Laravel.

I worked really hard to make a paginated set of data results that has column sorts and complete control over the pagination. The pagination navigation features a page by page link, previous and next buttons that only show when appropriate, first and last buttons, and a go to page input and button.

I also added an ajax-powered search box that queries on a keyup event. This produces column sortable, paginated results as well. All of this is done with vue.js, which is a javascript library that many Laravel developers are using these days.

One of the things I really struggled with was I couldn’t find a working example to follow. Luckily, I had bought The Majesty of View recently, which is an excellent book on vue. The book is really great for getting started with vue, but it wasn’t explicit enough with its pagination example for me to use it for my laravel datagrid.

Instead I used the datagrid example on vuejs.org as a starting point and built it up from there. Truth be told, I hit up one or two of the enterprise developers at work for some hints too, since I’m relatively new with vue. There’s nothing quite like working on a datagrid to move your js skills along.

Since I followed the datagrid from the vue.js example, I built it with a component, so this was a real crash course in vue.js. You can check out my work by installing the ViewMaker plugin, which will let you create a working version of the datagrid, along with the api controller and everything else you need in under a minute. Check out the docs on ViewMaker if you want to learn how to do that.

I’m going to do a deep dive tutorial on all this, which will probably appear in one of my books, since it’s too much for this blog and wordpress doesn’t let me publish js code snippets.

If you do play with ViewMaker’s datagrid, keep in mind that you need to run vue.js not vue.min.js, otherwise you don’t get important warnings and error messages. Also Chrome has a dev tools plugin for vue, but you also need to be using the not minified version to use that.

I’m going to be building more features into ViewMaker, which I will be announcing on this blog. My goal is to make ViewMaker an artisan plugin that you can’t live without.

Click on the sprocket icon at the top of the page to see all my Laravel articles and tutorials. Please comment, share, like and review if you can, thanks.

I don’t have a donate button, but If you would like to support my work and learn more about Laravel, you can do so by buying one of my books, Laraboot: laravel 5.2 For Beginners, I really appreciate it.