Vue.js integration into http://je.cool

Community resources Show & Tell
1

Hello community,
I have this very quick stuff to show you and lessons learned from using webflow + vue.js for rapid simple prototyping :

http://je.cool

Service description:
Setup your own redirects in seconds, so you can have yourname.je.cool as a domain. “Je” means “is” in Czech.

Vue.js integration:
Basic integration of Vue.js consisted of simple steps:

  1. Exported code of webflow project
  2. Opened locally in code editor of your choice (WebStorm here)
  3. added vue.js link into Head element:
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
  4. Add vue.js scripts at the bottom of a code:
    <script> new Vue({ el: '#app', data: { //data model here }, methods: { //methods here } }) </script>
  5. Add Vue to HTML by adding id=“app” to div, that wraps all the page.
  6. Add actions on buttons - using documentation on Event Handling | Vue.js I added simple v-on:click=“methodName()” action on the button and show/hide based on data using v-if binding.
  7. Rollout and see - it works :wink:

For backend - we used Redis, JAVA and Nginx server, all running in docker image.

Super easy, made in couple of hours (2 days tops).

Cheers, Jarda

3 Likes