ProcessWire & Vue.js — a Lovestory

[Noel Boss]

ProcessWire & Vue.js — a Lovestory

Introducing the all new ICF Conference Website

 

The new ICF Conference Page — Fearless

» What would happen if we were equipped to fearlessly face the daily challenges and live a life without fear? «

This question is at the core of our next ICF Conference in 2019 in Zurich. Its also the question we set out to answer in terms of developing the new website; the all new ICF Conference website is our most advanced website in terms of technology, designed to take advantage of the latest web-technologies.

Its a brand new design powered by a lean setup, using ProcessWire for easy content management and a slick frontend based on Vue.js, Quasar and a heavily customized Uikit theme.

 

Technology-stack — From backend to frontend, technologies that are fun, easy and fast to develop with

We built on the ICF Ladieslounge website as a solid foundation and took our learnings from building our last Conference Booklet PWA (Progressive Web App) and applied it to the new website.

Some highlights of the new ICF Conference website:

• Completely decoupled backend and frontend
• Custom design based on Uikit frontend framework
• Changing of languages happens instantly, no page-reload required
• Easy content updates thanks to ProcessWire
• All data is transferred using a single request returning custom JSON

» Continue reading on Medium

And please don't forget to clap and share: 

 

[dotnetic]

Clapped. Also on Medium ? Thanks for your insights and the PageQueryBoss module looks promising. I think I have a use for it in the near future.

[Brian Scramlin]

Thanks for sharing!!! 

[cjx2240]

This looks really interesting, thanks for taking the time to write it up, and provide that module!

Can anyone give a pointer where someone... you know... lets say a friend... who has maybe fallen way behind in terms of front-end technologies and has never touched vue.js or any of its kin, where they might start learning how to implement this PageQueryBoss module and turn it into a complete front-end?

[Noel Boss]

On 7/6/2018 at 4:24 PM, cjx2240 said:

Can anyone give a pointer where someone... you know... lets say a friend... who has maybe fallen way behind in terms of front-end technologies and has never touched vue.js or any of its kin, where they might start learning how to implement this PageQueryBoss module and turn it into a complete front-end?

It has not much to do with vue.js specifically and PageQueryBoss. You can make an AJAX request with any librrary, you build your JSON like the the link in medium above: https://gitlab.com/snippets/1729012

In vue.js, the JSON you get you add to the data of your component. I have not the time at the moment to explain in detail how we did it (apart from using Qusar as a starting point with vuex to store and retrieve data) but maybe this will help you:

https://www.digitalocean.com/community/tutorials/how-to-use-vue-js-and-axios-to-display-data-from-an-api

 

 

[Soma]

All nice and I know there's ways to get around it, but the Site has no content to crawl, just empty html. And if JS is not enabled you see this: "This is your fallback content in case JavaScript fails to load."

[Tom.]

@Soma 

Yeah this is my issue with Vue.JS - I use Vue.JS often for two way data-binding which is amazing to be able to easily update content and do visual changes to the site based on those updates. For example adding something to a basket. It's much easier with Vue than jQuery or JavaScript. 

My issue with Vue is exactly that. You can use it just on a component basis or you can use it to render your entire UI. To me it just doesn't make sense to use it to render an entire UI with a website. A web app sure, but a website it's often overkill and introduces that exact problem. You can introduce server side rendering of Vue with Nuxt but then it just seems like another layer of 'over complication'.

I personally stopped using Vue for websites unless I absolutely needed two way binding. It just didn't make sense and the extra complication of implementing it such as having to convert everything from ProcessWire into a JSON feed.

 

EDIT:

Noticed this post still gets likes, so what's changed since then? AlpineJS. AlpineJS is a solution to this exact problem, worth a look for anyone wanting to do some cool UI stuff without including all of Vue features and overhead.