In the last tutorial, we saw how to set up the ability for a user to subscribe to a thread. So what does that mean for the user? Well, if they are subscribed to the thread, then they likely would like to stay up to date with any new replies or activity on that thread. In this tutorial, we’ll look at how to set up Notifications.…
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.…
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.…
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.…
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.…
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.…
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.…