diff --git a/.babelrc b/.babelrc
new file mode 100644
index 0000000..cbd3ac6
--- /dev/null
+++ b/.babelrc
@@ -0,0 +1,8 @@
+{
+  "presets": [
+    "es2015"
+  ],
+  "plugins": [
+    "transform-runtime"
+  ]
+}
diff --git a/.editorconfig b/.editorconfig
index 619c178..b3e3025 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -7,6 +7,10 @@ indent_size = 4
 trim_trailing_whitespace = true
 insert_final_newline = true
 
+[*.vue]
+indent_style = space
+indent_size = 2
+
 [*.md]
 trim_trailing_whitespace = false
 
diff --git a/package.json b/package.json
index 7c2441b..d44313c 100644
--- a/package.json
+++ b/package.json
@@ -115,6 +115,8 @@
     "velocity-animate": "^1.4.0",
     "visibilityjs": "^1.2.4",
     "viz.js": "^1.4.1",
+    "vue": "^2.1.6",
+    "vue-loader": "^10.0.2",
     "winston": "^2.3.0",
     "xss": "^0.3.2"
   },
@@ -139,6 +141,12 @@
     "url": "https://github.com/hackmdio/hackmd.git"
   },
   "devDependencies": {
+    "babel-cli": "^6.18.0",
+    "babel-core": "^6.21.0",
+    "babel-loader": "^6.2.10",
+    "babel-plugin-transform-runtime": "^6.15.0",
+    "babel-preset-es2015": "^6.18.0",
+    "babel-runtime": "^6.20.0",
     "copy-webpack-plugin": "^4.0.1",
     "css-loader": "^0.26.1",
     "ejs-loader": "^0.3.0",
@@ -155,6 +163,7 @@
     "script-loader": "^0.7.0",
     "style-loader": "^0.13.1",
     "url-loader": "^0.5.7",
+    "vue-template-compiler": "^2.1.6",
     "webpack": "^1.14.0"
   }
 }
diff --git a/public/js/components/HelloWorld.vue b/public/js/components/HelloWorld.vue
new file mode 100644
index 0000000..d8e3007
--- /dev/null
+++ b/public/js/components/HelloWorld.vue
@@ -0,0 +1,21 @@
+<template>
+  <h1>{{ message }}</h1>
+</template>
+
+<script>
+export default {
+  name: 'HelloWorld',
+
+  data() {
+    return {
+      message: 'Hello Vue'
+    }
+  }
+}
+</script>
+
+<style scoped>
+h1 {
+  color: blue;
+}
+</style>
diff --git a/public/js/cover.js b/public/js/cover.js
index 2f35bd2..b888684 100644
--- a/public/js/cover.js
+++ b/public/js/cover.js
@@ -9,6 +9,7 @@ var urlpath = common.urlpath;
 var resetCheckAuth = common.resetCheckAuth;
 var getLoginState = common.getLoginState;
 var clearLoginState = common.clearLoginState;
+var loginStateChangeEvent = common.loginStateChangeEvent;
 
 var historyModule = require('./history');
 var parseStorageToHistory = historyModule.parseStorageToHistory;
@@ -27,6 +28,14 @@ var saveAs = require('file-saver').saveAs;
 var List = require('list.js');
 var S = require('string');
 
+import Cover from './views/Cover';
+import Vue from 'vue';
+
+new Vue({
+    el: '#cover-app',
+    render: (h) => h(Cover)
+})
+
 var options = {
     valueNames: ['id', 'text', 'timestamp', 'fromNow', 'time', 'tags', 'pinned'],
     item: '<li class="col-xs-12 col-sm-6 col-md-6 col-lg-4">\
diff --git a/public/js/index.js b/public/js/index.js
index 96580fe..4a46624 100644
--- a/public/js/index.js
+++ b/public/js/index.js
@@ -29,6 +29,7 @@ var DROPBOX_APP_KEY = common.DROPBOX_APP_KEY;
 var noteurl = common.noteurl;
 
 var checkLoginStateChanged = common.checkLoginStateChanged;
+var loginStateChangeEvent = common.loginStateChangeEvent;
 
 var extra = require('./extra');
 var md = extra.md;
diff --git a/public/js/views/Cover.vue b/public/js/views/Cover.vue
new file mode 100644
index 0000000..767d087
--- /dev/null
+++ b/public/js/views/Cover.vue
@@ -0,0 +1,15 @@
+<template>
+  <hello-world />
+</template>
+
+<script>
+import HelloWorld from '../components/HelloWorld';
+
+export default {
+  name: 'Cover',
+
+  components: {
+    HelloWorld
+  }
+}
+</script>
diff --git a/public/views/index.ejs b/public/views/index.ejs
index adcdd34..5b84f4f 100644
--- a/public/views/index.ejs
+++ b/public/views/index.ejs
@@ -30,6 +30,7 @@
     <div class="site-wrapper">
         <div class="site-wrapper-inner">
             <div class="cover-container">
+                <div id="cover-app"></div>
 
                 <div class="masthead clearfix">
                     <div class="inner">
diff --git a/webpackBaseConfig.js b/webpackBaseConfig.js
index 400db14..6c569c1 100644
--- a/webpackBaseConfig.js
+++ b/webpackBaseConfig.js
@@ -338,7 +338,7 @@ module.exports = {
             path.resolve(__dirname, 'src'),
             path.resolve(__dirname, 'node_modules')
         ],
-        extensions: ["", ".js"],
+        extensions: ["", ".js", ".vue"],
         alias: {
             codemirror: path.join(__dirname, 'node_modules/codemirror/codemirror.min.js'),
             inlineAttachment: path.join(__dirname, 'public/vendor/inlineAttachment/inline-attachment.js'),
@@ -372,6 +372,16 @@ module.exports = {
         loaders: [{
             test: /\.json$/,
             loader: 'json-loader'
+        }, {
+            test: /\.vue$/,
+            loader: 'vue',
+            options: {
+            // vue-loader options go here
+            }
+        }, {
+            test: /\.js$/,
+            loader: 'babel',
+            exclude: [/node_modules/, /public\/vendor/]
         }, {
             test: /\.css$/,
             loader: ExtractTextPlugin.extract('style-loader', 'css-loader')