MODX and Vue Front End Framework

Development
1

On the Content Management System page it mentions that MODX can power any design, any framework. “Power React, Vue, Angular and any other Javascript projects.”

I’m interested to hear if anyone has any experience integrating their Vue front end project with MODX. As a front end developer I like the idea of working with Vue.js but I need a way for customers to manage their content, and MODX is the preferred CMS of the studio I work for.

2

You can set up a restful api in modx and use that to pull json data from your resources, packages etc. The user can then continue to edit the content as they normally would within the cms. Documentation isn’t great (yet) but feel free to throw any questions in this thread.

https://docs.modx.com/revolution/2.x/developing-in-modx/advanced-development/developing-rest-servers

3

Thanks for pointing me in the right direction @lkfranklin.

4

I’m currently using the API @lkfranklin referenced and it works very well. It was a little confusing figuring out a few things but it works well with the Vue front end apps. I’m using independent Vue applications for things like modals to edit certain data and to display tabular data in particular areas. I’m not using it as an SPA, it’s a hybrid.

I like that Vue gives you “repeat” templating that I find a little easier than the current Modx templates for tabular data. I don’t have to define potentially three or more chunks to display the data (rowStart, rowData, rowEnd, etc). I can just utilize v-for and loop through.

I also use the “fake” or “quick” API concept where the end point is a resource with a content type of JSON. I then have a single snippet call that pulls in my class file. It dynamically builds the function name and executes that code block and returns a JSON payload that mirrors the format of the documented API. I use this API when the same action might have taken 2 or more API calls to accomplish from the other API like form validation of individual fields.

5

A bit late. I put this post together on the old forum around January 2019 so some of the Vuetify stuff could be out of date.

Essentially, a simple way to add reactivity via Vue and Vuetify for UI niceness and easier design. I think this qualifies as a hybrid approach. Standard MODx templates and chunks but with Vuetify code sprinkled through them.

https://forums.modx.com/thread/104746/a-view-on-vue-frontend-framework-modx

2 Likes