A simple UNIXtime component in Vue.js

Applications Web Development
1

A shout out to Scott who gave me a helping hand to turn a simple sample Vue.js app I wrote yesterday into a Vue.js component:


Vue.component("unix-time", {
  template: `<div class="time">{{unixtime}}</div>`,
  data() {
    return {
      unixtime: ""
    };
  },
  methods: {
    UpdateTime() {
      this.unixtime = Math.round(new Date().getTime() / 1000);
    }
  },
  created() {
    setInterval(() => {
      this.UpdateTime();
    }, 1000);
  }
});

For any Vue'ers who want the complete code, you can add this component to any root Vue.js element as long as the Vue instance is instantiated after the component appears in the script, for example, any root level element (like the one below) that appears after the component.

new Vue({
    el: '#myunixtime',
})

Then, in the HTML, just do something like this:


<div id="myunixtime">
      <unix-time></unix-time>
</div>

Thanks again to Scott for learning Vue.js with me and for the helping hand!

Maybe we will add this simple unixtime clock to the forums somewhere or use this component to replace the unixtime on the home page.....

1 Like
2

OK... decided to add this Vue.js component to each of our forum man pages.

Basically, to do this, just do three steps:

  1. Add the Vue.js JS lib to the page
  2. Add the unixtime.js code to the page
  3. Add the HTML to the page

In our case, we added two lines to our HTML template forum_man-pages right above the closing body tag:

<body>

....

<script src="/scripts/vue/dist/vue.js"></script>
<script src="/scripts/vue/neo/js/unixtime.js"></script>
     
</body>


# cat unixtime.js

Vue.component("unix-time", {
  template: `<div class="neo-man-caps" style="font-size:1.2em;">Current Unix Time: {{unixtime}}</div>`,
  data() {
    return {
      unixtime: "initializing ..."
    };
  },
  methods: {
    UpdateTime() {
      this.unixtime = Math.round(new Date().getTime() / 1000);
    }
  },
  created() {
    setInterval(() => {
      this.UpdateTime();
    }, 1000);
  }
});

var app = new Vue({
  el: "#vue"
});

also, added this HTML to the same template:

<div id="vue" align="center" style="margin:20px 0px 10px 0px;">
      <unix-time></unix-time>
</div>

You can see the results on every man page, for example:

FreeBSD 11.0 - man page for alias (freebsd section 1)

3 Likes