POWERFULHORSE Posted November 25, 2016 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
clsource Posted November 26, 2016 Posted November 26, 2016 Hello, Yes maybe this could help you https://github.com/NinjasCL/pw-rest 4
johnteaksf Posted February 8, 2017 Posted February 8, 2017 Hey @POWERFULHORSE any luck? I'm thinking of doing something similar. Would love to hear any snags or success stories.
adrian Posted February 8, 2017 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
johnteaksf Posted February 8, 2017 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
POWERFULHORSE Posted March 13, 2017 Author 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
Beluga Posted March 13, 2017 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
a-ok Posted March 24, 2017 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?
Soma Posted March 24, 2017 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
alxndre Posted March 28, 2017 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
Recommended Posts