diff --git a/build/vue-loader.conf.js b/build/vue-loader.conf.js
index 33ed58bc..0f0ddbc6 100755
--- a/build/vue-loader.conf.js
+++ b/build/vue-loader.conf.js
@@ -7,10 +7,13 @@ const sourceMapEnabled = isProduction
   : config.dev.cssSourceMap
 
 module.exports = {
-  loaders: utils.cssLoaders({
-    sourceMap: sourceMapEnabled,
-    extract: isProduction
-  }),
+  loaders: {
+    ...utils.cssLoaders({
+      sourceMap: sourceMapEnabled,
+      extract: isProduction
+    }),
+    i18n: '@kazupon/vue-i18n-loader'
+  },
   cssSourceMap: sourceMapEnabled,
   cacheBusting: config.dev.cacheBusting,
   transformToRequire: {
diff --git a/package.json b/package.json
index fe6a7128..6211efea 100755
--- a/package.json
+++ b/package.json
@@ -37,6 +37,7 @@
     "xlsx": "^0.12.0"
   },
   "devDependencies": {
+    "@kazupon/vue-i18n-loader": "^0.2.1",
     "autoprefixer": "^7.1.2",
     "babel-core": "^6.22.1",
     "babel-eslint": "^7.1.1",
diff --git a/src/pages/demo/plugins/vue-i18n/components/DemoI18n.vue b/src/pages/demo/plugins/vue-i18n/components/DemoI18n.vue
index e8558316..3e5d6eb0 100644
--- a/src/pages/demo/plugins/vue-i18n/components/DemoI18n.vue
+++ b/src/pages/demo/plugins/vue-i18n/components/DemoI18n.vue
@@ -1,3 +1,17 @@
+<i18n>
+{
+  "cn": {
+    "hello": "你好!"
+  },
+  "en": {
+    "hello": "hello world!"
+  },
+  "ja": {
+    "hello": "こんにちは、世界！"
+  }
+}
+</i18n>
+
 <template>
-  <el-button>Hello</el-button>
+  <el-button>{{$t('hello')}}</el-button>
 </template>