How to handle basic dynamic interaction on a webpage with Vue.js

In this blog post I want to share how to handle basic dynamic content with Vue.js on our Cloud Native Starter landing webpage. Vue.js is an open source licensed progressive framework for building user interfaces”.

The gif below shows following sequence:

  1. First, the page content changes when a button is clicked. The page shows a little pre-view of content for one of the selected topics on the Cloud Native Starter project landing page. The topics are “Basic Concepts”, “Reactive” and “Security”.
  2. Second, the image on the right hand side changes, a headline appears or changes, a description appears or changes, and a Learn more button appears and changes the content for routing to another webpage.
  3. Third, at the end in the gif the button Learn more is pressed and the page for Basic Concepts is shown.

The questions are: How ..

  • … to change images?
  • … can a text be changed or appear?
  • … to show a button and change the rooting to other webpages?
Continue reading

How to create an interactive YouTube Video selection in VUE

In this blog post I want to share my observations during my implementation of an interactive YouTube Video selection in VUE. Maybe this can save you some time, if you plan to do the same.

Let’s start with my motivation, it came from the improvements of the #BlueCloudMirror game UI. We decided to provide the #BlueCloudMirror users a recorded YouTube LiveStream of us. This video provides an awesome overview of our  major technologies.

The video takes approximately 50 minutes. This is a long time to watch, so we want to provide the user a new interactive architecture page, as you can see below. A user should have the ability to select the topic he is interested in. To do this, we needed the position selection for the YouTube video. In the gif you can see the result.

vue-youtube-selection

Topics of this blog post:

  • How to define dynamic values in a VUE template
  • How to configure autostart for YouTube videos
  • How to avoid SAMEORI problem with the YouTube video

Continue reading