Make the "Run query" button translatable

package.json

@@ -28,6 +28,7 @@
     "saucelabs": "^4.5.2",
     "sparqljs": "^3.0.3",
     "vue": "^2.6.11",
+    "vue-banana-i18n": "^1.3.0",
     "vuex": "^3.4.0"
   },
   "devDependencies": {

public/i18n/en.json

@@ -0,0 +1,3 @@
+{
+  "query-builder-run-query": "Run query"
+}

public/i18n/qqq.json

@@ -0,0 +1,3 @@
+{
+  "query-builder-run-query": "Text on the button that runs the query"
+}

src/App.vue

@@ -1,14 +1,34 @@
 <template>
 	<div id="app">
-		<QueryBuilder/>
+		<QueryBuilder v-if="isi18nLoaded"/>
 	</div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
 import QueryBuilder from '@/components/QueryBuilder.vue';
+import i18n from 'vue-banana-i18n';
 
 export default Vue.extend( {
+	data() {
+		return {
+			isi18nLoaded: false as boolean,
+		};
+	},
+	beforeCreate(): void {
+		const fetchi18n = async (): Promise<void> => {
+			const response = await fetch( 'i18n/en.json' );
+			const messages = await response.json();
+			Vue.use( i18n, {
+				locale: 'en',
+				messages,
+			} );
+			// TODO: Fix the typing warning
+			( this as any ).isi18nLoaded = true;
+		};
+
+		fetchi18n();
+	},
 	name: 'App',
 	components: {
 		QueryBuilder,

src/components/QueryBuilder.vue

@@ -22,7 +22,10 @@
 					placeholder="Enter a value" />
 			</div>
 			<div class="querybuilder__run">
-				<Button @click.native="runQuery" type="primaryProgressive">Run query</Button>
+				<Button
+					@click.native="runQuery"
+					type="primaryProgressive"
+					v-i18n="{msg: 'query-builder-run-query'}" />
 			</div>
 		</div>
 		<QueryResult

src/shims-vue.d.ts

@@ -2,3 +2,5 @@ declare module '*.vue' {
 	import Vue from 'vue';
 	export default Vue;
 }
+
+declare module 'vue-banana-i18n';