The previous article had us building a JSON Rest API using the Laravel Framework. In this tutorial, we’ll use Vuejs to build a front end which can consume the API we have in place. Instead of rendering blade files, we can use Vue components and AJAX to simply fetch the data we need to display from the API. We’ll even learn a little bit about customizing the CSS in Laravel using SCSS and Laravel Mix.…
In this tutorial we’ll build a full json crud api using Laravel and the new Eloquent API Resources feature. This approach is used when you want to build the entire back end of your application using Laravel, while leaving the front end to Vue, React, or Angular. By using Laravel and Eloquent API Resources, you can format your data responses however you like while also adding meta information, pagination links and information, custom data wrapping, conditional attributes, and relationships.…
In this article we present some popular open source projects that use Laravel. These include everything from personal music streaming servers to rapid API generator tools. In addition, we’ll see a nice collection of content management systems, forums, and even social bookmarking style applications in this roundup. Below you will find a short description and links to projects like Koel, CachetHQ, Flarum, October CMS, Laravel Voyager, Laravel Spreadsheet, MonicaHQ, Invoice Ninja, Laravel Boilerplate, Pyrocms, Polrproject, Laravel Generator, Pigjian, Vuedo, Laravel Charts, Laravel IO, Lavalite, Laravel Zero, Voten, Council, Canvas, Bookstackapp, and Apiato.…
In this tutorial we’ll create a VueJS image upload component so that users can upload an image to use as an avatar in the application. The goal is to re-create the mechanism of an image upload via an HTML form, however, it will all be done in a Vue component. This will allow for real-time image updating in the browser, in addition to putting the image in storage and setting the avatar image path in the database in one fell swoop.…
This tutorial will add the feature of autocomplete as you type. In the form where a user can enter a reply to a thread, we want the application to automatically start fetching usernames to choose from when you type a string that begins with the @ symbol. There is a jQuery plugin built for this exact purpose called At.js. In addition to autocomplete of usernames, the plugin also offers emoji like characters such as smileys, coffee cups, and more.…
Community based websites often times allow you to mention another user by screen name. For example, if you post a message to Twitter and include a user’s name including the @ symbol, then the user will get a notification that you mentioned them. This tutorial will recreate that type of feature in the forum based application we have been building. In the replies area of threads, if a user types in a reply and includes @Tom as an example, then when Tom logs into his account he should see a notification in the upper right navigation bar area to alert him that he has a thread to check out.…
The goal of this lesson will be to set up a mechanism where by we can highlight new content to returning visitors of the website. So for example, consider a user visits the site and reads all of the threads on the front page and then leaves for the day. Later, a different visitor visits the site and adds a new reply to say three different threads.…