Laravel Subscription System Tutorial

Laravel Subscription System Tutorial

Many popular websites allow you to subscribe to a particular topic or thread. In forum type applications, you often see the ability to subscribe to certain topics, and once you are subscribed you can get notifications via email or on the website itself. In this tutorial, we will build out a thread subscription system. It is fairly involved as it needs the back end system to power it, in addition to a reactive subscribe button powered by VueJS on the front end.…

VueJS Bootstrap Pagination Component

VueJS Bootstrap Pagination Component

In this tutorial we will look at porting the built in Laravel pagination features into a full blown Vue paginator component which uses Bootstrap for styling. Along the way, we’ll introduce a few new concepts like tapping into the created() life cycle hook as well as setting up a watch: life cycle hook. Our new paginator will be a child component of the Replies.vue component, so we’ll need to also set up a lot of communication between these components using props, events, and event listeners.…

Axios Powered VueJS Form Component

Axios Powered VueJS Form Component

Almost the entire thread view page has been updated to use VueJS components. The only thing left to work on is the form to add a new reply to a thread. Currently, it does a full form request to add a new reply. In this tutorial, we will create a new Vue component using Axios to perform ajax requests to the Laravel backend. Via these ajax requests, we will submit new replies to the server, and on the client side VueJS will automatically re render the HTML on the page to reflect the new update.…

How To Use VueJS with Laravel Blade

How To Use VueJS with Laravel Blade

This is a little bit of a challenging tutorial. What we want to do is implement inline-templates using blade into pure JavaScript or VueJS. Here is the challenge. As you know, blade has many convenience functions built in that allow you to quickly handle authorization, authentication, and helpful constructs like the @forelse loop. If we want an entirely Vue based solution, we’ll need to redo much of this functionality again on the client side.…

VueJS Textarea Binding

reply form vue component

In our application, we can create a new thread and leave a reply to any thread. We can also delete any thread or reply based on permissions allowed from the policies we had configured. Now we want to be able to edit a reply. Instead of deleting a reply entirely, we want to be able to just click a button, fix any text that we might not like, and then quickly save that edit.…

How To Create A Child Component In VueJS

How To Create A Child Component In VueJS

We’re on a roll working with VueJS, components, and ajaxified buttons in our view files. It was helpful to start off with no JavaScript at all, then progressively add in JavaScript to make the user experience better. At this point our edit and delete buttons for a reply are fully dynamic. In this tutorial, we will create a child component in VueJS so that we can give the ajax treatment to the Favorite button.…

How To Use VueJS With jQuery

How To Use VueJS With jQuery

In the last article we turned the reply form into a Vue component and saw how nice it was to have reactive data properties to handle editing and updating of a reply. In this article we can build on that Reply component and turn the delete function into an ajax powered version as well. In addition, we’ll see how you can still make use of jQuery in concert with VueJS for adding very simple jQuery animation type actions to your component.…

Check Authorization With Policies Before Delete Function

Use Policy For Authorization

In this tutorial we want to set up the ability for authorized users to delete any reply that they have created. In addition, guests or unauthorized users should not be able to delete any replies. So as usual, we’ll set up a couple of tests to support these new features. In addition we’ll leverage a new policy object to determine whether any particular user is authorized to delete a given reply.…