koba04/app.css

## app.css
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font: 13px Helvetica, Arial;
}

form {
  background: #000;
  padding: 3px;
  position: fixed;
  bottom: 0;
  width: 100%;
}

form input {
  border: 0;
  padding: 10px;
  width: 90%;
  margin-right: .5%;
}

form button {
  width: 9%;
  background: rgb(130, 224, 255);
  border: none;
  padding: 10px;
}

.messages {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.messages li {
  padding: 5px 10px;
}

.messages li:nth-child(odd) {
  background: #eee;
}


## app.js
var socket = io();

var vm = new Vue({
  el: "#chat",
  data: {
    messages: [],
    input: ""
  },
  methods: {
    post: function(e) {
      socket.emit('chat message', this.input);
      e.preventDefault();
    }
  }
});

socket.on('chat message', function(msg){
  vm.messages.push(msg);
});


## index.html
<!doctype html>
<html>
  <head>
    <title>Socket.IO chat</title>
    <link href="/css/app.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id="chat">
      <ul class="messages" >
        <li v-repeat="messages" v-text="$value"></li>
      </ul>
      <form action="" v-on="submit: post">
        <input v-model="input" autocomplete="off" /><button>Send</button>
      </form>
    </div>
    <script src="//cdnjs.cloudflare.com/ajax/libs/vue/0.10.4/vue.js"></script>
    <script src="/socket.io/socket.io.js"></script>
    <script src="/js/app.js"></script>
    <script>
    </script>
  </body>
</html>
	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}

	body {
	font: 13px Helvetica, Arial;
	}

	form {
	background: #000;
	padding: 3px;
	position: fixed;
	bottom: 0;
	width: 100%;
	}

	form input {
	border: 0;
	padding: 10px;
	width: 90%;
	margin-right: .5%;
	}

	form button {
	width: 9%;
	background: rgb(130, 224, 255);
	border: none;
	padding: 10px;
	}

	.messages {
	list-style-type: none;
	margin: 0;
	padding: 0;
	}

	.messages li {
	padding: 5px 10px;
	}

	.messages li:nth-child(odd) {
	background: #eee;
	}
	var socket = io();

	var vm = new Vue({
	el: "#chat",
	data: {
	messages: [],
	input: ""
	},
	methods: {
	post: function(e) {
	socket.emit('chat message', this.input);
	e.preventDefault();
	}
	}
	});

	socket.on('chat message', function(msg){
	vm.messages.push(msg);
	});
	<!doctype html>
	<html>
	<head>
	<title>Socket.IO chat</title>
	<link href="/css/app.css" rel="stylesheet" type="text/css" />
	</head>
	<body>
	<div id="chat">
	<ul class="messages" >
	<li v-repeat="messages" v-text="$value"></li>
	</ul>
	<form action="" v-on="submit: post">
	<input v-model="input" autocomplete="off" /><button>Send</button>
	</form>
	</div>
	<script src="//cdnjs.cloudflare.com/ajax/libs/vue/0.10.4/vue.js"></script>
	<script src="/socket.io/socket.io.js"></script>
	<script src="/js/app.js"></script>
	<script>
	</script>
	</body>
	</html>