- UPDATE
Since first publishing this post I have become aware of alpine.js. This is a javascript framework that is intended to be used in situations where a page requires interactivity but using vue.js is a bit overkill. Alpine.js is a really good framework and works in a very similar way to vue.js and would probably be a great solution here.
--
I have been using vue as a replacement for jQuery for a while now. Mainly in pretty small ways like toggling content, menus, FAQ dropdowns, etc.
One of the main reasons I have been drawn to Vue over other frameworks was because of its progressive nature. It is so easy to implement into an existing project where you might need some reactivity of special functionality.
We recently had a request to add some custom reporting on a custom build web application we built some time ago. The site does a number of things but essentially allows users to book items for events all over the world. One of the reports the client wanted to get from the stored data was the number of bookings that had occurred over a period of time and out of those bookings which ones had been accepted, rejected or not followed through.
As we were filtering data here between two set dates, making this a single page report was going to be the nicest solution. This felt like a great opportunity to use Vue. In the past we would have probably used jQuery to generate the AJAX calls but Vue was going to provide a cleaner, faster and more elegant solution.
Returning Data from Modx as JSON
First we needed to get the data from Modx into Json so we can use it within Vue. MODX 2.3 introduced a convenient method to develop RESTful APIs, on top of MODX and although this could have been an option, it felt a bit overkill for what we were wanting to achieve. After all, we were dealing with a one page report with one set of data. More information on this can be found here. https://docs.modx.com/3.x/en/extending-modx/developing-restful-api.
As a work around I built a simple snippet to grab the data I needed and return it as JSON
As you can see from the above code I have a custom component called engines with a class called ‘Bookings’. I am grabbing the entire collection here, but I will probably go back and only select fields I am going to want in my report later, but for the moment this is fine. Once I have the collection I just loop through creating an array and then encode that into JSON - nice and simple
I created a new resource and gave it an empty template. In the resource settings I changed content type to JSON. This resource now returns all the bookings to this url in JSON all ready for Vue.
Setting up Vue and Axios
As I mentioned earlier, this application was going to be single page, so I didn’t feel the need to create a separate Vue component. I will keep all my Vue code in an external javascript file.
As well as pulling in the Vue CDN I also grabbed Axios.
Axios seems to be the preferred method for pulling in JSON and to be fair, it seems very easy to use. This was my initial Vue setup which grabbed my JSON and added it to a bookings array.
With this data now in my bookings data object I was able to build methods and filters in Vue to build my reports and data filters.
Hopefully this helps someone who wants to add some Vue functionality into an existing MODX project. With very little setup and effort, it was actually quite easy to get the data out of MODX and ready for Vue to use.
