POWERFULHORSE Posted November 25, 2016 Share Posted November 25, 2016 I've been looking into both React and Vue.js for a while and how front-end frameworks like these could integrate with my current workflow of building websites with ProcessWire. Ultimately I've decided to go with Vue.js after using it for certain sections of a few previous projects and familiarizing myself with the documentation, but I assume the same concepts I'm trying to work out would apply for both. So for my next project, I was thinking of using ProcessWire to simply manage content and serve what would function as the website's API. Essentially I would install ProcessWire into a subdirectory of my site's root folder, say '/api', and all template files would serve JSON only. The site itself would essentially be a webapp served by a simple node.js server, with all routing handled by the vue-router component of Vue.js. This way I could also utilise some sort of server side rendering to avoid initial asynchronous content loading. I would then set up my ProcessWire tree structure so that the API routes match those defined by vue on the front-end, only prefixed with '/api', subsequent pages could then be loaded asynchronously. Has anyone used ProcessWire in a similar way in the past, or used it in another way alongside React or Vue.js? I would eventually like to start using this approach for client projects, my first attempt will be an internal project however. 3 Link to comment Share on other sites More sharing options...
clsource Posted November 26, 2016 Share Posted November 26, 2016 Hello, Yes maybe this could help you https://github.com/NinjasCL/pw-rest 4 Link to comment Share on other sites More sharing options...
johnteaksf Posted February 8, 2017 Share Posted February 8, 2017 Hey @POWERFULHORSE any luck? I'm thinking of doing something similar. Would love to hear any snags or success stories. Link to comment Share on other sites More sharing options...
adrian Posted February 8, 2017 Share Posted February 8, 2017 @johnteaksf - I have personally used it many times with AngularJS and plan on using it for the first time with VueJS pretty soon. A couple of other resources that might be helpful: Quote Front-end JS $pages API. front-end Javascript API of ProcessWire's $pages API variable would be really handy for a lot of cases, and so I'm going to continue to keep this in our roadmap. https://processwire.com/blog/posts/roadmap-2017/#whats-in-store-for-processwire-in-2017 1 Link to comment Share on other sites More sharing options...
johnteaksf Posted February 8, 2017 Share Posted February 8, 2017 @adrian awesome! Thanks for the resources. I'm going to start playing with it today. I'm actually looking specifically to use it with Vue.js, I'm getting snagged on how to take advantage of the really great component / templating and router system Vuejs has built in. 1 Link to comment Share on other sites More sharing options...
POWERFULHORSE Posted March 13, 2017 Author Share Posted March 13, 2017 I just finished a medium sized website/SPA using processwire and vue with vue router and vuex. Has lots of nice features like server side rendering, happy to share details with people if they'd be interested. Shoot me a PM. 6 Link to comment Share on other sites More sharing options...
Beluga Posted March 13, 2017 Share Posted March 13, 2017 31 minutes ago, POWERFULHORSE said: I just finished a medium sized website/SPA using processwire and vue with vue router and vuex. Has lots of nice features like server side rendering, happy to share details with people if they'd be interested. Shoot me a PM. If the details are not covered by an NDA, maybe you could share them publicly in this very topic 10 Link to comment Share on other sites More sharing options...
a-ok Posted March 24, 2017 Share Posted March 24, 2017 On 13/03/2017 at 9:03 AM, Beluga said: If the details are not covered by an NDA, maybe you could share them publicly in this very topic What do you think @POWERFULHORSE? Link to comment Share on other sites More sharing options...
Soma Posted March 24, 2017 Share Posted March 24, 2017 We started using mustache template engine with PW. Since mustache is implemented in various languages. Currently I can render anything either server side or client side with js or php and both share the same code base. Data can be either objects arrays or json whatever you like. We also use patternlabs node mustache version for prototyping and so all patterns can be used 1:1 in PW later using some simple controller system based on Classes that extend PW WireData so all API can be used. We also use terrificjs for easy modular js components. So no vue or react but just to mention that there's everything possible in PW. 6 Link to comment Share on other sites More sharing options...
alxndre Posted March 28, 2017 Share Posted March 28, 2017 On 3/25/2017 at 1:39 AM, Soma said: We started using mustache template engine with PW. Since mustache is implemented in various languages. Currently I can render anything either server side or client side with js or php and both share the same code base. Data can be either objects arrays or json whatever you like. We also use patternlabs node mustache version for prototyping and so all patterns can be used 1:1 in PW later using some simple controller system based on Classes that extend PW WireData so all API can be used. We also use terrificjs for easy modular js components. So no vue or react but just to mention that there's everything possible in PW. I'm interested to learn how this all works. Please nudge me to the right direction, with links perhaps, or examples specific to PW :). 2 Link to comment Share on other sites More sharing options...
Recommended Posts