From ee31c57fd40dd9b30bc3521d24b309253c82f441 Mon Sep 17 00:00:00 2001
From: kazuya kawaguchi <kawakazu80@gmail.com>
Date: Thu, 15 Mar 2018 18:45:29 +0900
Subject: [PATCH] feat(ui): localization of cli-ui

---
 packages/@vue/cli-ui/package.json             |   1 +
 .../cli-ui/src/components/FolderExplorer.vue  |  14 +-
 .../src/components/InstantSearchInput.vue     |   2 +-
 .../cli-ui/src/components/ListItemInfo.vue    |   2 +-
 .../@vue/cli-ui/src/components/LoggerView.vue |  10 +-
 .../cli-ui/src/components/ProgressScreen.vue  |   2 +-
 .../@vue/cli-ui/src/components/ProjectNav.vue |  14 +-
 .../src/components/ProjectPluginItem.vue      |   8 +-
 .../src/components/ProjectSelectList.vue      |   2 +-
 .../src/components/ProjectSelectListItem.vue  |   4 +-
 .../@vue/cli-ui/src/components/StatusBar.vue  |  10 +-
 packages/@vue/cli-ui/src/i18n.js              |  33 +++
 packages/@vue/cli-ui/src/locales/en.json      | 220 ++++++++++++++++++
 packages/@vue/cli-ui/src/locales/ja.json      | 220 ++++++++++++++++++
 packages/@vue/cli-ui/src/main.js              |   2 +
 packages/@vue/cli-ui/src/mixins/Progress.js   |  25 +-
 .../cli-ui/src/views/ProjectConfiguration.vue |   2 +-
 .../@vue/cli-ui/src/views/ProjectCreate.vue   |  86 +++----
 .../@vue/cli-ui/src/views/ProjectPlugins.vue  |   6 +-
 .../cli-ui/src/views/ProjectPluginsAdd.vue    |  28 +--
 .../@vue/cli-ui/src/views/ProjectSelect.vue   |  12 +-
 .../@vue/cli-ui/src/views/ProjectTasks.vue    |   2 +-
 22 files changed, 588 insertions(+), 117 deletions(-)
 create mode 100644 packages/@vue/cli-ui/src/i18n.js
 create mode 100644 packages/@vue/cli-ui/src/locales/en.json
 create mode 100644 packages/@vue/cli-ui/src/locales/ja.json

diff --git a/packages/@vue/cli-ui/package.json b/packages/@vue/cli-ui/package.json
index 58617aef6e..803f91ffb4 100644
--- a/packages/@vue/cli-ui/package.json
+++ b/packages/@vue/cli-ui/package.json
@@ -40,6 +40,7 @@
     "vue": "^2.5.13",
     "vue-apollo": "^3.0.0-beta.5",
     "vue-cli-plugin-apollo": "^0.6.1",
+    "vue-i18n": "^7.6.0",
     "vue-instantsearch": "^1.5.1",
     "vue-router": "^3.0.1",
     "vue-template-compiler": "^2.5.13",
diff --git a/packages/@vue/cli-ui/src/components/FolderExplorer.vue b/packages/@vue/cli-ui/src/components/FolderExplorer.vue
index 282ee93355..cb60cf16bb 100644
--- a/packages/@vue/cli-ui/src/components/FolderExplorer.vue
+++ b/packages/@vue/cli-ui/src/components/FolderExplorer.vue
@@ -9,7 +9,7 @@
       <VueButton
         class="icon-button"
         icon-left="keyboard_arrow_up"
-        v-tooltip="'Open parent folder'"
+        v-tooltip="$t('components.folder-explorer.toolbar.tooltips.parent-folder')"
         @click="openParentFolder"
       />
 
@@ -17,7 +17,7 @@
         <VueInput
           ref="pathInput"
           v-model="editedPath"
-          placeholder="Enter the full path to a folder"
+          :placeholder="$t('components.folder-explorer.toolbar.placeholder')"
           icon-left="edit"
           @keyup.esc="editingPath = false"
           @keyup.enter="submitPathEdit()"
@@ -28,7 +28,7 @@
         v-else
         :query="require('@/graphql/cwd.gql')"
         class="current-path"
-        v-tooltip="'Edit path'"
+        v-tooltip="$t('components.folder-explorer.toolbar.tooltips.edit-path')"
         @click.native="openPathEdit()"
       >
         <ApolloSubscribeToMore
@@ -50,7 +50,7 @@
       <VueButton
         class="icon-button favorite-button"
         :icon-left="folderCurrent.favorite ? 'star' : 'star_border'"
-        v-tooltip="'Toggle favorite'"
+        v-tooltip="$t('components.folder-explorer.toolbar.tooltips.favorite')"
         @click="toggleFavorite()"
       />
 
@@ -61,7 +61,7 @@
           slot="trigger"
           icon-left="arrow_drop_down"
           class="icon-button"
-          v-tooltip="'Favorite folders'"
+          v-tooltip="$t('components.folder-explorer.toolbar.tooltips.favorite-folders')"
         />
 
         <template v-if="foldersFavorite.length">
@@ -75,14 +75,14 @@
         </template>
 
         <div v-else class="vue-empty">
-          No favorite folders yet.
+          {{ $t('components.folder-explorer.toolbar.empty') }}
         </div>
       </VueDropdown>
 
       <VueButton
         class="icon-button"
         icon-left="refresh"
-        v-tooltip="'Refresh'"
+        v-tooltip="$t('components.folder-explorer.toolbar.tooltips.refresh')"
         @click="refreshFolder"
       />
     </div>
diff --git a/packages/@vue/cli-ui/src/components/InstantSearchInput.vue b/packages/@vue/cli-ui/src/components/InstantSearchInput.vue
index 647a0faa4f..47ee1a6747 100644
--- a/packages/@vue/cli-ui/src/components/InstantSearchInput.vue
+++ b/packages/@vue/cli-ui/src/components/InstantSearchInput.vue
@@ -5,7 +5,7 @@
       icon-left="search"
       v-model="query"
       class="big"
-      placeholder="Search a plugin"
+      :placeholder="$t('components.instant-search-input.placeholder')"
     >
       <template slot="right">
         <VueButton
diff --git a/packages/@vue/cli-ui/src/components/ListItemInfo.vue b/packages/@vue/cli-ui/src/components/ListItemInfo.vue
index c920646835..38c2e2e89c 100644
--- a/packages/@vue/cli-ui/src/components/ListItemInfo.vue
+++ b/packages/@vue/cli-ui/src/components/ListItemInfo.vue
@@ -22,7 +22,7 @@
         @click.stop="() => {}"
       >
         <VueIcon icon="open_in_new" class="medium top"/>
-        More info
+        {{ $t('components.list-item-info.more-info') }}
       </a>
     </div>
   </div>
diff --git a/packages/@vue/cli-ui/src/components/LoggerView.vue b/packages/@vue/cli-ui/src/components/LoggerView.vue
index de77ccb9d0..bb0e7ae588 100644
--- a/packages/@vue/cli-ui/src/components/LoggerView.vue
+++ b/packages/@vue/cli-ui/src/components/LoggerView.vue
@@ -5,12 +5,12 @@
         icon="dvr"
       />
       <div class="title">
-        Logs
+        {{ $t('components.logger-view.title') }}
       </div>
       <VueButton
         class="icon-button"
         icon-left="delete_forever"
-        v-tooltip="'Clear logs'"
+        v-tooltip="$t('components.logger-view.buttons.clear')"
         @click="clearLogs()"
       />
       <VueIcon
@@ -20,13 +20,13 @@
       <VueButton
         class="icon-button"
         icon-left="subdirectory_arrow_left"
-        v-tooltip="'Scroll to bottom'"
+        v-tooltip="$t('components.logger-view.buttons.scroll')"
         @click="scrollToBottom()"
       />
       <VueButton
         class="icon-button"
         icon-left="close"
-        v-tooltip="'Close'"
+        v-tooltip="$t('components.logger-view.buttons.close')"
         @click="close()"
       />
     </div>
@@ -56,7 +56,7 @@
             class="vue-empty"
           >
             <VueIcon icon="wifi" class="large"/>
-            <div>No logs yet</div>
+            <div>{{ $t('components.logger-view.empty') }}</div>
           </div>
         </template>
       </template>
diff --git a/packages/@vue/cli-ui/src/components/ProgressScreen.vue b/packages/@vue/cli-ui/src/components/ProgressScreen.vue
index 950c7097c8..58f392fe8f 100644
--- a/packages/@vue/cli-ui/src/components/ProgressScreen.vue
+++ b/packages/@vue/cli-ui/src/components/ProgressScreen.vue
@@ -20,7 +20,7 @@
             <div class="actions">
               <VueButton
                 icon-left="close"
-                label="Close"
+                :label="$t('components.progress-screen.close')"
                 @click="close()"
               />
             </div>
diff --git a/packages/@vue/cli-ui/src/components/ProjectNav.vue b/packages/@vue/cli-ui/src/components/ProjectNav.vue
index 42b2643de4..161207a90d 100644
--- a/packages/@vue/cli-ui/src/components/ProjectNav.vue
+++ b/packages/@vue/cli-ui/src/components/ProjectNav.vue
@@ -12,7 +12,7 @@
           class="flat big icon-button"
           :value="route.name"
           :icon-left="route.icon"
-          v-tooltip.right="route.tooltip"
+          v-tooltip.right="renderTooltip(route.tooltip)"
         />
       </VueGroup>
     </div>
@@ -24,17 +24,17 @@ const BUILTIN_ROUTES = [
   {
     name: 'project-plugins',
     icon: 'widgets',
-    tooltip: 'Plugins'
+    tooltip: 'plugins'
   },
   {
     name: 'project-configuration',
     icon: 'settings_applications',
-    tooltip: 'Configuration'
+    tooltip: 'configuration'
   },
   {
     name: 'project-tasks',
     icon: 'assignment',
-    tooltip: 'Tasks'
+    tooltip: 'tasks'
   }
 ]
 
@@ -65,6 +65,12 @@ export default {
       }
     }
   },
+
+  methods: {
+    renderTooltip (target) {
+      return this.$t(`components.project-nav.tooltips.${target}`)
+    }
+  }
 }
 </script>
 
diff --git a/packages/@vue/cli-ui/src/components/ProjectPluginItem.vue b/packages/@vue/cli-ui/src/components/ProjectPluginItem.vue
index 48ae8aef60..ce8e900d21 100644
--- a/packages/@vue/cli-ui/src/components/ProjectPluginItem.vue
+++ b/packages/@vue/cli-ui/src/components/ProjectPluginItem.vue
@@ -9,12 +9,12 @@
     >
       <span slot="description" class="plugin-description">
         <span class="info version">
-          <span class="label">version</span>
+          <span class="label">{{ $t('components.project-plugin-item.version') }}</span>
           <span class="value">{{ plugin.version.current }}</span>
         </span>
 
         <span class="info latest">
-          <span class="label">latest</span>
+          <span class="label">{{ $t('components.project-plugin-item.latest') }}</span>
           <VueIcon
             v-if="plugin.version.current !== plugin.version.latest"
             icon="warning"
@@ -28,7 +28,7 @@
             icon="star"
             class="top medium"
           />
-          Official
+          {{ $t('components.project-plugin-item.official') }}
         </span>
 
         <span v-if="plugin.installed" class="info">
@@ -36,7 +36,7 @@
             icon="check_circle"
             class="top medium"
           />
-          Installed
+          {{ $t('components.project-plugin-item.installed') }}
         </span>
 
         <span v-if="plugin.description" class="package-description">
diff --git a/packages/@vue/cli-ui/src/components/ProjectSelectList.vue b/packages/@vue/cli-ui/src/components/ProjectSelectList.vue
index f9e781f485..ca322ffb66 100644
--- a/packages/@vue/cli-ui/src/components/ProjectSelectList.vue
+++ b/packages/@vue/cli-ui/src/components/ProjectSelectList.vue
@@ -18,7 +18,7 @@
           </div>
           <div v-else class="vue-empty">
             <VueIcon icon="attach_file" class="empty-icon"/>
-            <div>No existing projects</div>
+            <div>{{ $t('components.project-select-list.empty') }}</div>
           </div>
         </template>
       </template>
diff --git a/packages/@vue/cli-ui/src/components/ProjectSelectListItem.vue b/packages/@vue/cli-ui/src/components/ProjectSelectListItem.vue
index e90332bc9c..399735fc10 100644
--- a/packages/@vue/cli-ui/src/components/ProjectSelectListItem.vue
+++ b/packages/@vue/cli-ui/src/components/ProjectSelectListItem.vue
@@ -5,7 +5,7 @@
         <VueButton
           class="icon-button"
           :icon-left="project.favorite ? 'star' : 'star_border'"
-          v-tooltip="'Toggle favorite'"
+          v-tooltip="$t('components.project-select-list-item.tooltips.favorite')"
           @click.stop="$emit('favorite')"
         />
       </div>
@@ -19,7 +19,7 @@
         <VueButton
           class="icon-button"
           icon-left="delete"
-          v-tooltip="'Delete'"
+          v-tooltip="$t('components.project-select-list-item.tooltips.delete')"
           @click.stop="$emit('remove')"
         />
       </div>
diff --git a/packages/@vue/cli-ui/src/components/StatusBar.vue b/packages/@vue/cli-ui/src/components/StatusBar.vue
index d270491ce9..6aec2f9a76 100644
--- a/packages/@vue/cli-ui/src/components/StatusBar.vue
+++ b/packages/@vue/cli-ui/src/components/StatusBar.vue
@@ -8,18 +8,18 @@
     <div class="content">
       <div
         class="section action current-project"
-        v-tooltip="'Current project<br><i>Click to toggle Project Manager</i>'"
+        v-tooltip="$t('components.status-bar.project.tooltip')"
         @click="onProjectClick()"
       >
         <VueIcon icon="work"/>
         <span v-if="projectCurrent">{{ projectCurrent.name }}</span>
-        <span v-else class="label">No project</span>
+        <span v-else class="label">{{ $t('components.status-bar.project.empty') }}</span>
       </div>
 
       <ApolloQuery
         :query="require('@/graphql/cwd.gql')"
         class="section current-path"
-        v-tooltip="'Current Working Directory'"
+        v-tooltip="$t('components.status-bar.path.tooltip')"
         @click.native="onCwdClick()"
       >
         <ApolloSubscribeToMore
@@ -37,7 +37,7 @@
 
       <div
         class="section action console-log"
-        v-tooltip="'Logs<br><i>Click to toggle vue-cli logs</i>'"
+        v-tooltip="$t('components.status-bar.log.tooltip')"
         @click="onConsoleClick()"
       >
         <VueIcon icon="dvr"/>
@@ -45,7 +45,7 @@
           v-if="consoleLogLast"
           :message="consoleLogLast"
         />
-        <div v-else class="last-message">No logs yet</div>
+        <div v-else class="last-message">{{ $t('components.status-bar.log.empty') }}</div>
         <!-- <TerminalView
           :cols="100"
           :rows="1"
diff --git a/packages/@vue/cli-ui/src/i18n.js b/packages/@vue/cli-ui/src/i18n.js
new file mode 100644
index 0000000000..db9e52d3ac
--- /dev/null
+++ b/packages/@vue/cli-ui/src/i18n.js
@@ -0,0 +1,33 @@
+import Vue from 'vue'
+import VueI18n from 'vue-i18n'
+
+Vue.use(VueI18n)
+
+function loadLocaleMessages () {
+  const locales = require.context('./locales', true, /[a-z0-9]+\.json$/i)
+  const messages = {}
+  locales.keys().forEach(key => {
+    const locale = key.match(/([a-z0-9]+)\./i)[1]
+    messages[locale] = locales(key)
+  })
+  return messages
+}
+
+function detectLanguage () {
+  try {
+    const lang = (window.navigator.languages && window.navigator.languages[0]) ||
+      window.navigator.language ||
+      window.navigator.userLanguage
+    return lang.substr(0, 2)
+  } catch (e) {
+    return undefined
+  }
+}
+
+const i18n = new VueI18n({
+  locale: detectLanguage() || 'en',
+  fallbackLocale: 'en',
+  messages: loadLocaleMessages()
+})
+
+export default i18n
diff --git a/packages/@vue/cli-ui/src/locales/en.json b/packages/@vue/cli-ui/src/locales/en.json
new file mode 100644
index 0000000000..64dd1b1fb1
--- /dev/null
+++ b/packages/@vue/cli-ui/src/locales/en.json
@@ -0,0 +1,220 @@
+{
+  "components": {
+    "folder-explorer": {
+      "toolbar": {
+        "tooltips": {
+          "parent-folder": "Open parent folder",
+          "edit-path": "Edit path",
+          "favorite": "Toggle favorite",
+          "favorite-folders": "Favorite folders",
+          "refresh": "Refresh"
+        },
+        "placeholder": "Enter the full path to a folder",
+        "empty": "No favorite folders yet."
+      }
+    },
+    "instant-search-input": {
+      "placeholder": "Search a plugin"
+    },
+    "list-item-info": {
+      "more-info": "More Info"
+    },
+    "logger-view": {
+      "title": "Logs",
+      "empty": "Not logs yet",
+      "buttons": {
+        "clear": "Clear logs",
+        "scroll": "Scroll to bottom",
+        "close": "Close"
+      }
+    },
+    "progress-screen": {
+      "close": "Close"
+    },
+    "project-nav": {
+      "tooltips": {
+        "plugins": "Plugins",
+        "configuration": "Configuration",
+        "tasks": "Tasks"
+      }
+    },
+    "project-select-list": {
+      "empty": "No existing projects"
+    },
+    "project-select-list-item": {
+      "tooltips": {
+        "favorite": "Toggle favorite",
+        "delete": "Delete"
+      }
+    },
+    "project-plugin-item": {
+      "version": "version",
+      "latest": "latest",
+      "official": "Official",
+      "installed": "Installed"
+    },
+    "status-bar": {
+      "project": {
+        "tooltip": "Current project<br><i>Click to toggle Project Manager</i>",
+        "empty": "No project"
+      },
+      "path": {
+        "tooltip": "Current Working Folder"
+      },
+      "log": {
+        "tooltip": "Logs<br><i>Click to toggle Vue CLI logs</i>",
+        "empty": "No logs yet"
+      }
+    }
+  },
+  "mixins": {
+    "progress": {
+      "creating": "Creating project...",
+      "git-init": "Initializing git repository...",
+      "plugins-install": "Installing Vue CLI plugins. This might take a while...",
+      "invoking-generators": "Invoking generators...",
+      "deps-install": "Installing additional dependencies...",
+      "completion-hooks": "Running completion hooks...",
+      "fetch-remote-preset": "Fetching remote preset...",
+      "done": "Successfully created project",
+      "plugin-install": "Installing {arg0}",
+      "plugin-uninstall": "Uninstalling {arg0}",
+      "plugin-invoke": "Invoking {arg0}"
+    }
+  },
+  "views": {
+    "project-select": {
+      "title": "Vue Project Manager",
+      "tabs": {
+        "projects": "Projects",
+        "create": "Create",
+        "import": "Import"
+      },
+      "buttons": {
+        "create": "Create a new project here",
+        "import": "Import this folder"
+      }
+    },
+    "project-create": {
+      "title": "Create a new project",
+      "tabs": {
+        "details": {
+          "title": "Details",
+          "form": {
+            "folder": {
+              "label": "Project folder",
+              "placeholder": "my-app",
+              "tooltip": "Change base folder",
+              "action": "Select this folder"
+            },
+            "manager": {
+              "label": "Project manager",
+              "default": "Default"
+            },
+            "options": {
+              "label": "Additional options",
+              "description": "Overwrite target folder if it exists"
+            }
+          },
+          "buttons": {
+            "cancel": "Cancel",
+            "next": "Next"
+          },
+          "modal": {
+            "title": "Cancel and reset project creation",
+            "body": "Are you sure you want to reset the project creation?",
+            "buttons": {
+              "back": "Go back",
+              "clear": "Clear project"
+            }
+          }
+        },
+        "presets": {
+          "title": "Presets",
+          "description": "A preset is an association of plugins and configurations. After you've selected features, you can optionally save it as a preset so that you can reuse it for future projects, without having to reconfigure everything again.",
+          "select": "Select a preset",
+          "buttons": {
+            "previous": "Previous",
+            "next": "Next",
+            "create": "Create Project"
+          },
+          "modal": {
+            "title": "Configure Remote preset",
+            "body": "Available soon..."
+          }
+        },
+        "features": {
+          "title": "Features",
+          "description": "You will be able to add features after the project is created.",
+          "enable": "Enable features",
+          "buttons": {
+            "previous": "Previous",
+            "next": "Next",
+            "create": "Create Project"
+          }
+        },
+        "configuration": {
+          "title": "Configuration",
+          "buttons": {
+            "previous": "Previous",
+            "create": "Create Project"
+          },
+          "modal": {
+            "title": "Save as a new preset",
+            "body": {
+              "title": "Preset name",
+              "subtitle": "Save the features and configuration into a new preset"
+            },
+            "buttons": {
+              "cancel": "Cancel",
+              "continue": "Continue without saving",
+              "create": "Create a new preset"
+            }
+          }
+        }
+      }
+    },
+    "project-plugins": {
+      "title": "Project plugins",
+      "button": "Add plugin",
+      "heading": "Installed plugins"
+    },
+    "project-plugins-add": {
+      "title": "Add a plugin",
+      "plugin": "plugin",
+      "tabs": {
+        "search": {
+          "label": "Search",
+          "not-found": "Not results found",
+          "buttons": {
+            "cancel": "Cancel",
+            "install": "Install {target}"
+          }
+        },
+        "configuration": {
+          "label": "Configuration",
+          "heading": "Installation of {target}",
+          "buttons": {
+            "cancel": "Cancel",
+            "finish": "Finish installation"
+          }
+        }
+      },
+      "modal": {
+        "title": "Uninstall {target}?",
+        "body": "Do you want to uninstall the {target} plugin?",
+        "buttons": {
+          "back": "Go back",
+          "cancel": "Cancel without uninstalling",
+          "uninstall": "Uninstall"
+        }
+      }
+    },
+    "project-configuration": {
+      "title": "Project configuration"
+    },
+    "project-tasks": {
+      "title": "Project tasks"
+    }
+  }
+}
diff --git a/packages/@vue/cli-ui/src/locales/ja.json b/packages/@vue/cli-ui/src/locales/ja.json
new file mode 100644
index 0000000000..65ca190bc1
--- /dev/null
+++ b/packages/@vue/cli-ui/src/locales/ja.json
@@ -0,0 +1,220 @@
+{
+  "components": {
+    "folder-explorer": {
+      "toolbar": {
+        "tooltips": {
+          "parent-folder": "親フォルダを開く",
+          "edit-path": "パスを編集する",
+          "favorite": "お気に入りをトグル",
+          "favorite-folders": "お気に入りフォルダ",
+          "refresh": "リフレッシュ"
+        },
+        "placeholder": "フォルダへのフルパスを入力する",
+        "empty": "まだお気に入りフォルダがありません。"
+      }
+    },
+    "instant-search-input": {
+      "placeholder": "プラグインを検索する"
+    },
+    "list-item-info": {
+      "more-info": "詳細情報"
+    },
+    "logger-view": {
+      "title": "ログ",
+      "empty": "まだログはありません",
+      "buttons": {
+        "clear": "ログをクリアする",
+        "scroll": "一番下にスクロールする",
+        "close": "閉じる"
+      }
+    },
+    "progress-screen": {
+      "close": "閉じる"
+    },
+    "project-nav": {
+      "tooltips": {
+        "plugins": "プラグイン",
+        "configuration": "設定",
+        "tasks": "タスク"
+      }
+    },
+    "project-select-list": {
+      "empty": "プロジェクトが存在しません"
+    },
+    "project-select-list-item": {
+      "tooltips": {
+        "favorite": "お気に入りをトグル",
+        "delete": "削除する"
+      }
+    },
+    "project-plugin-item": {
+      "version": "バージョン",
+      "latest": "最新",
+      "official": "公式",
+      "installed": "インストール済み"
+    },
+    "status-bar": {
+      "project": {
+        "tooltip": "現在のプロジェクト<br><i>プロジェクトマネージャにトグルするにはクリック</i>",
+        "empty": "プロジェクトなし"
+      },
+      "path": {
+        "tooltip": "現在の作業フォルダ"
+      },
+      "log": {
+        "tooltip": "ログ<br><i>Vue CLI のログをトグルするにはクリック</i>",
+        "empty": "まだログはありません"
+      }
+    }
+  },
+  "mixins": {
+    "progress": {
+      "creating": "プロジェクトを作成中...",
+      "git-init": "Git リポジトリを初期化中...",
+      "plugins-install": "Vue CLI プラグインをインストール中。これは時間がかかるかもしれません...",
+      "invoking-generators": "ジェネレータを起動中...",
+      "deps-install": "追加依存関係をインストール中...",
+      "completion-hooks": "完了フックを実行中...",
+      "fetch-remote-preset": "リモートプリセットのフェッチング...",
+      "done": "プロジェクトを作成しました",
+      "plugin-install": "{arg0} をインストール中",
+      "plugin-uninstall": "{arg0} をアンインストール中",
+      "plugin-invoke": "{arg0} を起動中"
+    }
+  },
+  "views": {
+    "project-select": {
+      "title": "Vue プロジェクトマネージャ",
+      "tabs": {
+        "projects": "プロジェクト",
+        "create": "作成",
+        "import": "インポート"
+      },
+      "buttons": {
+        "create": "ここに新しいプロジェクトを作成する",
+        "import": "このフォルダをインポートする"
+      }
+    },
+    "project-create": {
+      "title": "新しいプロジェクトを作成する",
+      "tabs": {
+        "details": {
+          "title": "詳細",
+          "form": {
+            "folder": {
+              "label": "プロジェクトフォルダ",
+              "placeholder": "my-app",
+              "tooltip": "ベースフォルダを変更する",
+              "action": "このフォルダを選択する"
+            },
+            "manager": {
+              "label": "プロジェクトマネージャ",
+              "default": "デフォルト"
+            },
+            "options": {
+              "label": "追加オプション",
+              "description": "存在する場合はターゲットフォルダを上書きする"
+            }
+          },
+          "buttons": {
+            "cancel": "キャンセル",
+            "next": "次へ"
+          },
+          "modal": {
+            "title": "プロジェクト作成のキャンセルとリセット",
+            "body": "プロジェクト作成をリセットしますか?",
+            "buttons": {
+              "back": "戻る",
+              "clear": "プロジェクトをクリア"
+            }
+          }
+        },
+        "presets": {
+          "title": "プリセット",
+          "description": "プリセットはプラグインと設定の関連付けです。機能を選択した後に、必要に応じてプリセットとして保存することができます。これにより、すべてを再設定することなく、次のプロジェクトに再利用できるようになります。",
+          "select": "プリセットを選択する",
+          "buttons": {
+            "previous": "前へ",
+            "next": "次へ",
+            "create": "プロジェクトを作成する"
+          },
+          "modal": {
+            "title": "リモートプリセットを設定する",
+            "body": "間もなく利用できます..."
+          }
+        },
+        "features": {
+          "title": "機能",
+          "description": "プロジェクトが作成された後に機能を追加することができます。",
+          "enable": "機能の有効化",
+          "buttons": {
+            "previous": "前へ",
+            "next": "次へ",
+            "create": "プロジェクトを作成する"
+          }
+        },
+        "configuration": {
+          "title": "設定",
+          "buttons": {
+            "previous": "前へ",
+            "create": "プロジェクトを作成する"
+          },
+          "modal": {
+            "title": "新しいプロジェクトを保存する",
+            "body": {
+              "title": "プリセット名",
+              "subtitle": "新しいプリセットに機能と設定を保存する"
+            },
+            "buttons": {
+              "cancel": "キャンセル",
+              "continue": "保存なしで続ける",
+              "create": "プロジェクトを作成する"
+            }
+          }
+        }
+      }
+    },
+    "project-plugins": {
+      "title": "プロジェクトプラグイン",
+      "button": "プラグインを追加する",
+      "heading": "インストールされたプラグイン"
+    },
+    "project-plugins-add": {
+      "title": "プラグインを追加する",
+      "plugin": "プラグイン",
+      "tabs": {
+        "search": {
+          "label": "検索",
+          "not-found": "結果が見つかりません",
+          "buttons": {
+            "cancel": "キャンセル",
+            "install": "{target} をインストール"
+          }
+        },
+        "configuration": {
+          "label": "設定",
+          "heading": "{target} の設定",
+          "buttons": {
+            "cancel": "キャンセル",
+            "finish": "インストールを終了する"
+          }
+        }
+      },
+      "modal": {
+        "title": "{target} をアンインストールしますか?",
+        "body": "{target} プラグインをアンインストールしたいですか?",
+        "buttons": {
+          "back": "戻る",
+          "cancel": "アンインストールなしでキャンセル",
+          "uninstall": "アンインストール"
+        }
+      }
+    },
+    "project-configuration": {
+      "title": "プロジェクト設定"
+    },
+    "project-tasks": {
+      "title": "プロジェクトタスク"
+    }
+  }
+}
diff --git a/packages/@vue/cli-ui/src/main.js b/packages/@vue/cli-ui/src/main.js
index f42ee6da9e..f311cb2739 100644
--- a/packages/@vue/cli-ui/src/main.js
+++ b/packages/@vue/cli-ui/src/main.js
@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
+import i18n from './i18n'
 import { apolloProvider } from './vue-apollo'
 import VueUi from '@vue/ui'
 import InstantSearch from 'vue-instantsearch'
@@ -19,6 +20,7 @@ Vue.config.productionTip = false
 const app = new Vue({
   provide: apolloProvider.provide(),
   router,
+  i18n,
   ...App
 })
 
diff --git a/packages/@vue/cli-ui/src/mixins/Progress.js b/packages/@vue/cli-ui/src/mixins/Progress.js
index 357d4960b2..a48496051e 100644
--- a/packages/@vue/cli-ui/src/mixins/Progress.js
+++ b/packages/@vue/cli-ui/src/mixins/Progress.js
@@ -2,20 +2,6 @@ import PROGRESS from '../graphql/progress.gql'
 import PROGRESS_CHANGED from '../graphql/progressChanged.gql'
 import PROGRESS_REMOVED from '../graphql/progressRemoved.gql'
 
-const messages = {
-  'creating': 'Creating project...',
-  'git-init': 'Initializing git repository...',
-  'plugins-install': 'Installing CLI plugins. This might take a while...',
-  'invoking-generators': 'Invoking generators...',
-  'deps-install': 'Installing additional dependencies...',
-  'completion-hooks': 'Running completion hooks...',
-  'fetch-remote-preset': `Fetching remote preset...`,
-  'done': 'Successfully created project',
-  'plugin-install': 'Installing {{arg0}}',
-  'plugin-uninstall': 'Uninstalling {{arg0}}',
-  'plugin-invoke': 'Invoking {{arg0}}'
-}
-
 // @vue/component
 export default {
   props: {
@@ -80,16 +66,13 @@ export default {
       if (!this.progress) return null
 
       const { status } = this.progress
-      let message = messages[status]
-      if (message && this.progress.args) {
+      const values = {}
+      if (this.progress.args) {
         for (let i = 0, l = this.progress.args.length; i < l; i++) {
-          message = message.replace(
-            new RegExp(`{{arg${i}}}`, 'g'),
-            this.progress.args[i]
-          )
+          values[`arg${i}`] = this.progress.args[i]
         }
       }
-      return message || status || ''
+      return this.$t(`mixins.progress.${status}`, values) || status || ''
     }
   }
 }
diff --git a/packages/@vue/cli-ui/src/views/ProjectConfiguration.vue b/packages/@vue/cli-ui/src/views/ProjectConfiguration.vue
index b53eff16a1..963f38f418 100644
--- a/packages/@vue/cli-ui/src/views/ProjectConfiguration.vue
+++ b/packages/@vue/cli-ui/src/views/ProjectConfiguration.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="project-configuration page">
     <ContentView
-      title="Project configuration"
+      :title="$t('views.project-configuration.title')"
     >
       WIP
     </ContentView>
diff --git a/packages/@vue/cli-ui/src/views/ProjectCreate.vue b/packages/@vue/cli-ui/src/views/ProjectCreate.vue
index c98adaa0d5..f3013bacb2 100644
--- a/packages/@vue/cli-ui/src/views/ProjectCreate.vue
+++ b/packages/@vue/cli-ui/src/views/ProjectCreate.vue
@@ -2,23 +2,23 @@
   <div class="project-create page">
     <div class="content">
       <StepWizard
-        title="Create a new project"
+        :title="$t('views.project-create.title')"
         class="frame"
       >
         <template slot-scope="{ next, previous }">
           <VueTab
             id="details"
-            label="Details"
+            :label="$t('views.project-create.tabs.details.title')"
             icon="subject"
           >
             <div class="content vue-disable-scroll">
               <div class="project-details vue-grid col-1 big-gap">
                 <VueFormField
-                  title="Project folder"
+                  :title="$t('views.project-create.tabs.details.form.folder.label')"
                 >
                   <VueInput
                     v-model="formData.folder"
-                    placeholder="my-app"
+                    :placeholder="$t('views.project-create.tabs.details.form.folder.placeholder')"
                     icon-left="folder"
                     class="big"
                   />
@@ -38,14 +38,14 @@
                       <VueButton
                         icon-left="edit"
                         class="icon-button"
-                        v-tooltip="'Change base directory'"
+                        v-tooltip="$t('views.project-create.tabs.details.form.folder.tooltip')"
                         :to="{
                           name: 'project-select',
                           query: {
-                            title: 'Create a new project',
+                            title: $t('views.project-create.title'),
                             tab: 'create',
                             hideTabs: true,
-                            action: 'Select this folder'
+                            action: $t('views.project-create.tabs.details.form.folder.action')
                           }
                         }"
                       />
@@ -54,14 +54,14 @@
                 </VueFormField>
 
                 <VueFormField
-                  title="Package manager"
+                  :title="$t('views.project-create.tabs.details.form.manager.label')"
                 >
                   <VueSelect
                     v-model="formData.packageManager"
                   >
                     <VueSelectButton
                       :value="undefined"
-                      label="Default"
+                      :label="$t('views.project-create.tabs.details.form.manager.default')"
                     />
                     <VueSelectButton
                       value="npm"
@@ -75,13 +75,13 @@
                 </VueFormField>
 
                 <VueFormField
-                  title="Additional options"
+                  :title="$t('views.project-create.tabs.details.form.options.label')"
                 >
                   <VueSwitch
                     v-model="formData.force"
                     class="extend-left"
                   >
-                    Overwrite target directory if it exists
+                    {{ $t('views.project-create.tabs.details.form.options.description') }}
                   </VueSwitch>
                 </VueFormField>
               </div>
@@ -90,14 +90,14 @@
             <div class="actions-bar">
               <VueButton
                 icon-left="close"
-                label="Cancel"
+                :label="$t('views.project-create.tabs.details.buttons.cancel')"
                 class="big"
                 @click="showCancel = true"
               />
 
               <VueButton
                 icon-right="arrow_forward"
-                label="Next"
+                :label="$t('views.project-create.tabs.details.buttons.next')"
                 class="big primary"
                 :disabled="!detailsValid"
                 @click="next()"
@@ -107,7 +107,7 @@
 
           <VueTab
             id="presets"
-            label="Presets"
+            :label="$t('views.project-create.tabs.presets.title')"
             icon="check_circle"
             :disabled="!detailsValid"
             lazy
@@ -115,10 +115,12 @@
             <div class="content vue-disable-scroll">
               <div class="vue-text info banner">
                 <VueIcon icon="info" class="big"/>
-                <span>A preset is an association of plugins and configurations. After you've selected features, you can optionally save it as a preset so that you can reuse it for future projects, without having to reconfigure everything again.</span>
+                <span>{{ $t('views.project-create.tabs.presets.description') }}</span>
               </div>
 
-              <div class="cta-text">Select a preset</div>
+              <div class="cta-text">
+                {{ $t('views.project-create.tabs.presets.select') }}
+              </div>
 
               <template v-if="projectCreation">
                 <ProjectPresetItem
@@ -140,7 +142,7 @@
             <div class="actions-bar">
               <VueButton
                 icon-left="arrow_back"
-                label="Previous"
+                :label="$t('views.project-create.tabs.presets.buttons.previous')"
                 class="big"
                 @click="previous()"
               />
@@ -148,7 +150,7 @@
               <VueButton
                 v-if="manual"
                 icon-right="arrow_forward"
-                label="Next"
+                :label="$t('views.project-create.tabs.presets.buttons.next')"
                 class="big primary"
                 :disabled="!presetValid"
                 @click="next()"
@@ -156,7 +158,7 @@
               <VueButton
                 v-else
                 icon-left="done"
-                label="Create project"
+                :label="$t('views.project-create.tabs.presets.buttons.create')"
                 class="big primary"
                 @click="createWithoutSaving()"
               />
@@ -165,7 +167,7 @@
 
           <VueTab
             id="features"
-            label="Features"
+            :label="$t('views.project-create.tabs.features.title')"
             icon="device_hub"
             :disabled="!detailsValid || !presetValid || !manual"
             lazy
@@ -173,10 +175,12 @@
             <div class="content vue-disable-scroll">
               <div class="vue-text info banner">
                 <VueIcon icon="info" class="big"/>
-                <span>You will be able to add features after the project is created.</span>
+                <span>{{ $t('views.project-create.tabs.features.description') }}</span>
               </div>
 
-              <div class="cta-text">Enable features</div>
+              <div class="cta-text">
+                {{ $t('views.project-create.tabs.features.enable') }}
+              </div>
 
               <template v-if="projectCreation">
                 <ProjectFeatureItem
@@ -191,7 +195,7 @@
             <div class="actions-bar">
               <VueButton
                 icon-left="arrow_back"
-                label="Previous"
+                :label="$t('views.project-create.tabs.features.buttons.previous')"
                 class="big"
                 @click="previous()"
               />
@@ -199,14 +203,14 @@
               <VueButton
                 v-if="enabledPrompts.length"
                 icon-right="arrow_forward"
-                label="Next"
+                :label="$t('views.project-create.tabs.features.buttons.next')"
                 class="big primary"
                 @click="next()"
               />
               <VueButton
                 v-else
                 icon-left="done"
-                label="Create project"
+                :label="$t('views.project-create.tabs.features.buttons.create')"
                 class="big primary"
                 @click="showSavePreset = true"
               />
@@ -243,7 +247,7 @@
 
           <VueTab
             id="config"
-            label="Configuration"
+            :label="$t('views.project-create.tabs.configuration.title')"
             icon="settings_applications"
             :disabled="!detailsValid || !presetValid || !manual || !enabledPrompts.length"
             lazy
@@ -258,14 +262,14 @@
             <div class="actions-bar">
               <VueButton
                 icon-left="arrow_back"
-                label="Previous"
+                :label="$t('views.project-create.tabs.configuration.buttons.previous')"
                 class="big"
                 @click="previous()"
               />
 
               <VueButton
                 icon-left="done"
-                label="Create project"
+                :label="$t('views.project-create.tabs.configuration.buttons.create')"
                 class="big primary"
                 :disabled="!configurationValid"
                 @click="showSavePreset = true"
@@ -278,38 +282,40 @@
 
     <VueModal
       v-if="showRemotePreset"
-      title="Configure Remote preset"
+      :title="$t('views.project-create.tabs.presets.modal.title')"
       class="medium"
       @close="showRemotePreset = false"
     >
       <div class="default-body">
         <div class="vue-empty">
           <VueIcon icon="cake" class="large"/>
-          <div>Available soon...</div>
+          <div>
+            {{ $t('views.project-create.tabs.presets.modal.body') }}
+          </div>
         </div>
       </div>
     </VueModal>
 
     <VueModal
       v-if="showCancel"
-      title="Cancel and reset project creation"
+      :title="$t('views.project-create.tabs.details.modal.title')"
       class="small"
       @close="showCancel = false"
     >
       <div class="default-body">
-        Are you sure you want to reset the project creation?
+        {{ $t('views.project-create.tabs.details.modal.body') }}
       </div>
 
       <div slot="footer" class="actions space-between">
         <VueButton
-          label="Go back"
+          :label="$t('views.project-create.tabs.details.modal.buttons.back')"
           class="flat"
           @click="showCancel = false"
         />
 
         <VueButton
           :to="{ name: 'project-select' }"
-          label="Clear project"
+          :label="$t('views.project-create.tabs.details.modal.buttons.clear')"
           icon-left="delete_forever"
           class="danger"
           @click="reset()"
@@ -319,14 +325,14 @@
 
     <VueModal
       v-if="showSavePreset"
-      title="Save as a new preset"
+      :title="$t('views.project-create.tabs.configuration.modal.title')"
       class="small"
       @close="showSavePreset = false"
     >
       <div class="default-body">
         <VueFormField
-          title="Preset name"
-          subtitle="Save the features and configuration into a new preset"
+          :title="$t('views.project-create.tabs.configuration.modal.body.title')"
+          :subtitle="$t('views.project-create.tabs.configuration.modal.body.subtitle')"
         >
           <VueInput
             v-model="formData.save"
@@ -337,19 +343,19 @@
 
       <div slot="footer" class="actions end">
         <VueButton
-          label="Cancel"
+          :label="$t('views.project-create.tabs.configuration.modal.buttons.cancel')"
           class="flat"
           @click="showSavePreset = false"
         />
 
         <VueButton
-          label="Continue without saving"
+          :label="$t('views.project-create.tabs.configuration.modal.buttons.continue')"
           class="flat"
           @click="createWithoutSaving()"
         />
 
         <VueButton
-          label="Create a new preset"
+          :label="$t('views.project-create.tabs.configuration.modal.buttons.create')"
           icon-left="save"
           class="primary"
           :disabled="!formData.save"
diff --git a/packages/@vue/cli-ui/src/views/ProjectPlugins.vue b/packages/@vue/cli-ui/src/views/ProjectPlugins.vue
index c99e66ec55..6230a3d384 100644
--- a/packages/@vue/cli-ui/src/views/ProjectPlugins.vue
+++ b/packages/@vue/cli-ui/src/views/ProjectPlugins.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="project-plugins page">
     <ContentView
-      title="Project plugins"
+      :title="$t('views.project-plugins.title')"
     >
       <template slot="header">
         <VueButton
           icon-left="add"
-          label="Add plugin"
+          :label="$t('views.project-plugins.button')"
           class="primary"
           :to="{ name: 'project-plugins-add' }"
         />
@@ -17,7 +17,7 @@
         fetch-policy="cache-and-network"
       >
         <template slot-scope="{ result: { data, loading } }">
-          <div class="cta-text">Installed plugins</div>
+          <div class="cta-text">{{ $t('views.project-plugins.heading') }}</div>
 
           <VueLoadingIndicator
             v-if="loading"
diff --git a/packages/@vue/cli-ui/src/views/ProjectPluginsAdd.vue b/packages/@vue/cli-ui/src/views/ProjectPluginsAdd.vue
index 34367ee715..7713b89b5f 100644
--- a/packages/@vue/cli-ui/src/views/ProjectPluginsAdd.vue
+++ b/packages/@vue/cli-ui/src/views/ProjectPluginsAdd.vue
@@ -2,14 +2,14 @@
   <div class="project-plugins-add page">
     <div class="content">
       <StepWizard
-        title="Add a plugin"
+        :title="$t('views.project-plugins-add.title')"
         class="frame"
         :tab-id.sync="tabId"
       >
         <template slot-scope="{ next, previous }">
           <VueTab
             id="search"
-            label="Search"
+            :label="$t('views.project-plugins-add.tabs.search.label')"
             icon="search"
             disabled
           >
@@ -48,7 +48,7 @@
                 <ais-no-results>
                   <div class="vue-empty">
                     <VueIcon icon="search" class="huge"/>
-                    <div>No results found</div>
+                    <div>{{ $t('views.project-plugins-add.tabs.search.not-found') }}</div>
                   </div>
                 </ais-no-results>
                 <InstantSearchPagination/>
@@ -58,7 +58,7 @@
             <div class="actions-bar no-padding-x">
               <VueButton
                 icon-left="close"
-                label="Cancel"
+                :label="$t('views.project-plugins-add.tabs.search.buttons.cancel')"
                 class="big"
                 @click="close()"
               />
@@ -69,7 +69,7 @@
 
               <VueButton
                 icon-left="file_download"
-                :label="`Install ${selectedId || 'plugin'}`"
+                :label="$t('views.project-plugins-add.tabs.search.buttons.install', { target: selectedId || $t('views.project-plugins-add.plugin') })"
                 class="big primary"
                 :disabled="!selectedId"
                 @click="installPlugin()"
@@ -79,13 +79,13 @@
 
           <VueTab
             id="config"
-            label="Configuration"
+            :label="$t('views.project-plugins-add.tabs.configuration.label')"
             icon="settings_applications"
             disabled
             lazy
           >
             <div class="content vue-disable-scroll">
-              <div class="cta-text">Installation of {{ pluginId }}</div>
+              <div class="cta-text">{{ $t('views.project-plugins-add.tabs.configuration.heading', { target: pluginId }) }}</div>
 
               <PromptsList
                 :prompts="enabledPrompts"
@@ -96,14 +96,14 @@
             <div class="actions-bar no-padding-x">
               <VueButton
                 icon-left="arrow_back"
-                label="Cancel"
+                :label="$t('views.project-plugins-add.tabs.configuration.buttons.cancel')"
                 class="big"
                 @click="showCancelInstall = true"
               />
 
               <VueButton
                 icon-left="done"
-                label="Finish installation"
+                :label="$t('views.project-plugins-add.tabs.configuration.buttons.finish')"
                 class="big primary"
                 :disabled="!configurationValid"
                 @click="invokePlugin()"
@@ -116,29 +116,29 @@
 
     <VueModal
       v-if="showCancelInstall"
-      :title="`Uninstall ${pluginId}?`"
+      :title="$t('views.project-plugins-add.modal.title', { target: pluginId })"
       class="small"
       @close="showCancelInstall = false"
     >
       <div class="default-body">
-        Do you want to uninstall the {{ pluginId }} plugin?
+        {{ $t('views.project-plugins-add.modal.body', { target: pluginId }) }}
       </div>
 
       <div slot="footer" class="actions space-between">
         <VueButton
-          label="Go back"
+          :label="$t('views.project-plugins-add.modal.buttons.back')"
           class="flat"
           @click="showCancelInstall = false"
         />
 
         <VueButton
-          label="Cancel without uninstalling"
+          :label="$t('views.project-plugins-add.modal.buttons.cancel')"
           class="flat"
           @click="cancelInstall()"
         />
 
         <VueButton
-          label="Uninstall"
+          :label="$t('views.project-plugins-add.modal.buttons.uninstall')"
           icon-left="delete_forever"
           class="danger"
           @click="uninstallPlugin()"
diff --git a/packages/@vue/cli-ui/src/views/ProjectSelect.vue b/packages/@vue/cli-ui/src/views/ProjectSelect.vue
index b733cad2cf..41a2635ea6 100644
--- a/packages/@vue/cli-ui/src/views/ProjectSelect.vue
+++ b/packages/@vue/cli-ui/src/views/ProjectSelect.vue
@@ -2,13 +2,13 @@
   <div class="project-select page">
     <StepWizard
       :tab-id.sync="tab"
-      :title="$route.query.title || 'Vue Project Manager'"
+      :title="$route.query.title || $t('views.project-select.title')"
       :hide-tabs="!!hideTabs"
       class="frame"
     >
       <VueTab
         id="existing"
-        label="Projects"
+        :label="$t('views.project-select.tabs.projects')"
         icon="storage"
       >
         <ProjectSelectList/>
@@ -16,7 +16,7 @@
 
       <VueTab
         id="create"
-        label="Create"
+        :label="$t('views.project-select.tabs.create')"
         icon="add_box"
       >
         <div class="content">
@@ -26,7 +26,7 @@
         <div class="actions-bar center">
           <VueButton
             icon-left="add"
-            :label="$route.query.action || 'Create a new project here'"
+            :label="$route.query.action || $t('views.project-select.buttons.create')"
             class="big primary"
             :to="{ name: 'project-create' }"
           />
@@ -35,7 +35,7 @@
 
       <VueTab
         id="import"
-        label="Import"
+        :label="$t('views.project-select.tabs.import')"
         icon="unarchive"
       >
         <div class="content">
@@ -45,7 +45,7 @@
         <div class="actions-bar center">
           <VueButton
             icon-left="unarchive"
-            :label="$route.query.action || 'Import this folder'"
+            :label="$route.query.action || $t('views.project-select.buttons.import')"
             class="big primary"
             :disabled="!folderCurrent.isVueProject"
             @click="importProject()"
diff --git a/packages/@vue/cli-ui/src/views/ProjectTasks.vue b/packages/@vue/cli-ui/src/views/ProjectTasks.vue
index 901033b7c8..6eacf2db57 100644
--- a/packages/@vue/cli-ui/src/views/ProjectTasks.vue
+++ b/packages/@vue/cli-ui/src/views/ProjectTasks.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="project-tasks page">
     <ContentView
-      title="Project tasks"
+      :title="$t('views.project-tasks.title')"
     >
       WIP
     </ContentView>