Streaming live at 10am (PST)

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


#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 https://vuejs.org/v2/guide/events.html 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


#2