diff --git a/system/author/editor/editor-blox.twig b/system/author/editor/editor-blox.twig
index 12ebeca..6017c79 100644
--- a/system/author/editor/editor-blox.twig
+++ b/system/author/editor/editor-blox.twig
@@ -12,7 +12,7 @@
 		    v-bind:key="tab"
 		    v-bind:class="['tab-button', { active: currentTab === tab }]"
 		    v-on:click="currentTab = tab"
-		  >${ $t(tab) }</button>
+		  >${ tab|translate }</button>
 
 		  <component 
 		  	class="tab" 
@@ -65,7 +65,7 @@
 
 					<content-block :body="false">
 
-						<button v-for="button in formats" class="format-item"  @click.prevent="setData( $event, button.component )" data-id="99999" id="blox-99999" :title="$t(button.title)" v-html="button.label"></button>
+						<button v-for="button in formats" class="format-item"  @click.prevent="setData( $event, button.component )" data-id="99999" id="blox-99999" :title="button.title|translate" v-html="button.label"></button>
 					
 					</content-block>
 
diff --git a/system/author/editor/editor-raw.twig b/system/author/editor/editor-raw.twig
index e818498..0b9c042 100644
--- a/system/author/editor/editor-raw.twig
+++ b/system/author/editor/editor-raw.twig
@@ -12,7 +12,7 @@
 		    v-bind:key="tab"
 		    v-bind:class="['tab-button', { active: currentTab === tab }]"
 		    v-on:click="currentTab = tab"
-		  >${ $t(tab) }</button>
+		  >${ tab|translate }</button>
 
 		  <component 
 		  	class="tab" 
diff --git a/system/author/js/vue-meta.js b/system/author/js/vue-meta.js
index 09c411d..e544997 100644
--- a/system/author/js/vue-meta.js
+++ b/system/author/js/vue-meta.js
@@ -1,9 +1,20 @@
 const FormBus = new Vue();
 
+Vue.filter('translate', function (value) {
+  if (!value) return ''
+  value = value.replace(/[ ]/g,"_").replace(/[.]/g, "_").replace(/[-]/g, "_").replace(/[,]/g,"_").replace(/[(]/g,"_").replace(/[)]/g,"_").toUpperCase()
+  translated_string = labels[value]
+  if(!translated_string || translated_string.length === 0){
+    return value + '?'
+  } else {
+    return labels[value]
+  }
+})
+
 Vue.component('component-text', {
 	props: ['class', 'id', 'description', 'maxlength', 'hidden', 'readonly', 'required', 'disabled', 'placeholder', 'label', 'name', 'type', 'value', 'errors'],
 	template: '<div class="large">' +
-				'<label>{{ $t(label) }}</label>' +
+				'<label>{{ label|translate }}</label>' +
 				'<input type="text"' + 
 					' :id="id"' +
 					' :maxlength="maxlength"' +
@@ -16,7 +27,7 @@ Vue.component('component-text', {
 					' :value="value"' +
 					'@input="update($event, name)">' +
 			  	'<span v-if="errors[name]" class="error">{{ errors[name] }}</span>' +
-			  	'<span v-else class="fielddescription"><small>{{ $t(description) }}</small></span>' +
+			  	'<span v-else class="fielddescription"><small>{{ description|translate }}</small></span>' +
 			  '</div>',
 	methods: {
 		update: function($event, name)
@@ -29,7 +40,7 @@ Vue.component('component-text', {
 Vue.component('component-textarea', {
 	props: ['class', 'id', 'description', 'maxlength', 'readonly', 'required', 'disabled', 'placeholder', 'label', 'name', 'type', 'value', 'errors'],
 	template: '<div class="large">' +
-				'<label>{{ $t(label) }}</label>' +
+				'<label>{{ label|translate }}</label>' +
 				'<textarea ' +
 					' :id="id"' +
 					' :readonly="readonly"' +
@@ -40,7 +51,7 @@ Vue.component('component-textarea', {
 					' :value="value"' +
 					' @input="update($event, name)"></textarea>' +
 			  	'<span v-if="errors[name]" class="error">{{ errors[name] }}</span>' +
-			  	'<span v-else class="fielddescription"><small>{{ $t(description) }}</small></span>' +
+			  	'<span v-else class="fielddescription"><small>{{ description|translate }}</small></span>' +
 			  '</div>',
 	methods: {
 		update: function($event, name)
@@ -53,7 +64,7 @@ Vue.component('component-textarea', {
 Vue.component('component-url', {
 	props: ['class', 'id', 'description', 'maxlength', 'readonly', 'required', 'disabled', 'placeholder', 'label', 'name', 'type', 'value', 'errors'],
 	template: '<div class="large">' +
-				'<label>{{ $t(label) }}</label>' +
+				'<label>{{ label|translate }}</label>' +
 				'<input type="url"' + 
 					' :id="id"' +
 					' :maxlength="maxlength"' +
@@ -65,7 +76,7 @@ Vue.component('component-url', {
 					' :value="value"' +
 					'@input="update($event, name)">' +
 			  	'<span v-if="errors[name]" class="error">{{ errors[name] }}</span>' +
-			  	'<span v-else class="fielddescription"><small>{{ $t(description) }}</small></span>' +			  	
+			  	'<span v-else class="fielddescription"><small>{{ description|translate }}</small></span>' +			  	
 			  '</div>',
 	methods: {
 		update: function($event, name)
@@ -78,7 +89,7 @@ Vue.component('component-url', {
 Vue.component('component-number', {
 	props: ['class', 'id', 'description', 'min', 'max', 'maxlength', 'readonly', 'required', 'disabled', 'placeholder', 'label', 'name', 'type', 'value', 'errors'],
 	template: '<div class="large">' +
-				'<label>{{ $t(label) }}</label>' +
+				'<label>{{ label|translate }}</label>' +
 				'<input type="number"' + 
 					' :id="id"' +
 					' :min="min"' +
@@ -92,7 +103,7 @@ Vue.component('component-number', {
 					' :value="value"' +
 					'@input="update($event, name)">' +
 			  	'<span v-if="errors[name]" class="error">{{ errors[name] }}</span>' +
-			  	'<span v-else class="fielddescription"><small>{{ $t(description) }}</small></span>' +
+			  	'<span v-else class="fielddescription"><small>{{ description|translate }}</small></span>' +
 			  '</div>',
 	methods: {
 		update: function($event, name)
@@ -105,7 +116,7 @@ Vue.component('component-number', {
 Vue.component('component-email', {
 	props: ['class', 'id', 'description', 'maxlength', 'readonly', 'required', 'disabled', 'placeholder', 'label', 'name', 'type', 'value', 'errors'],
 	template: '<div class="large">' +
-				'<label>{{ $t(label) }}</label>' +
+				'<label>{{ label|translate }}</label>' +
 				'<input type="email"' + 
 					' :id="id"' +
 					' :maxlength="maxlength"' +
@@ -117,7 +128,7 @@ Vue.component('component-email', {
 					' :value="value"' +
 					'@input="update($event, name)">' +
 			  	'<span v-if="errors[name]" class="error">{{ errors[name] }}</span>' +
-			  	'<span v-else class="fielddescription"><small>{{ $t(description) }}</small></span>' +
+			  	'<span v-else class="fielddescription"><small>{{ description|translate }}</small></span>' +
 			  '</div>',
 	methods: {
 		update: function($event, name)
@@ -130,7 +141,7 @@ Vue.component('component-email', {
 Vue.component('component-tel', {
 	props: ['class', 'id', 'description', 'maxlength', 'readonly', 'required', 'disabled', 'placeholder', 'label', 'name', 'type', 'value', 'errors'],
 	template: '<div class="large">' +
-				'<label>{{ $t(label) }}</label>' +
+				'<label>{{ label|translate }}</label>' +
 				'<input type="tel"' + 
 					' :id="id"' +
 					' :maxlength="maxlength"' +
@@ -142,7 +153,7 @@ Vue.component('component-tel', {
 					' :value="value"' +
 					'@input="update($event, name)">' +
 			  	'<span v-if="errors[name]" class="error">{{ errors[name] }}</span>' +
-			  	'<span v-else class="fielddescription"><small>{{ $t(description) }}</small></span>' +
+			  	'<span v-else class="fielddescription"><small>{{ description|translate }}</small></span>' +
 			  '</div>',
 	methods: {
 		update: function($event, name)
@@ -155,7 +166,7 @@ Vue.component('component-tel', {
 Vue.component('component-password', {
 	props: ['class', 'id', 'description', 'maxlength', 'readonly', 'required', 'disabled', 'placeholder', 'label', 'name', 'type', 'value', 'errors'],
 	template: '<div class="large">' +
-				'<label>{{ $t(label) }}</label>' +
+				'<label>{{ label|translate }}</label>' +
 				'<input type="password"' + 
 					' :id="id"' +
 					' :maxlength="maxlength"' +
@@ -167,7 +178,7 @@ Vue.component('component-password', {
 					' :value="value"' +
 					'@input="update($event, name)">' +
 			  	'<span v-if="errors[name]" class="error">{{ errors[name] }}</span>' +
-			  	'<span v-else class="fielddescription"><small>{{ $t(description) }}</small></span>' +
+			  	'<span v-else class="fielddescription"><small>{{ description|translate }}</small></span>' +
 			  '</div>',
 	methods: {
 		update: function($event, name)
@@ -180,7 +191,7 @@ Vue.component('component-password', {
 Vue.component('component-date', {
 	props: ['class', 'id', 'description', 'maxlength', 'readonly', 'required', 'disabled', 'placeholder', 'label', 'name', 'type', 'value', 'errors'],
 	template: '<div class="large">' +
-				'<label>{{ $t(label) }}</label>' +
+				'<label>{{ label|translate }}</label>' +
 				'<input type="date" ' +
 					' :id="id"' +
 					' :readonly="readonly"' +
@@ -191,7 +202,7 @@ Vue.component('component-date', {
 					' :value="value"' +
 					' @input="update($event, name)">' +
 			  	'<span v-if="errors[name]" class="error">{{ errors[name] }}</span>' +
-			  	'<span v-else class="fielddescription"><small>{{ $t(description) }}</small></span>' +
+			  	'<span v-else class="fielddescription"><small>{{ description|translate }}</small></span>' +
 			  '</div>',
 	methods: {
 		update: function($event, name)
@@ -204,7 +215,7 @@ Vue.component('component-date', {
 Vue.component('component-color', {
 	props: ['class', 'id', 'description', 'maxlength', 'readonly', 'required', 'disabled', 'placeholder', 'label', 'name', 'type', 'value', 'errors'],
 	template: '<div class="large">' +
-				'<label>{{ $t(label) }}</label>' +
+				'<label>{{ label|translate }}</label>' +
 				'<input type="color" ' +
 					' :id="id"' +
 					' :readonly="readonly"' +
@@ -215,7 +226,7 @@ Vue.component('component-color', {
 					' :value="value"' +
 					' @input="update($event, name)">' +
 			  	'<span v-if="errors[name]" class="error">{{ errors[name] }}</span>' +
-			  	'<span v-else class="fielddescription"><small>{{ $t(description) }}</small></span>' +
+			  	'<span v-else class="fielddescription"><small>{{ description|translate }}</small></span>' +
 			  '</div>',
 	methods: {
 		update: function($event, name)
@@ -228,7 +239,7 @@ Vue.component('component-color', {
 Vue.component('component-select', {
 	props: ['class', 'id', 'description', 'readonly', 'required', 'disabled', 'label', 'name', 'type', 'options', 'value', 'errors'],
 	template: '<div class="large">' +
-				'<label>{{ $t(label) }}</label>' +
+				'<label>{{ label|translate }}</label>' +
 			    '<select' + 
 					' :id="id"' +
 					' :name="name"' +
@@ -239,7 +250,7 @@ Vue.component('component-select', {
 			      	'<option v-for="option,optionkey in options" v-bind:value="optionkey">{{option}}</option>' +
 			    '</select>' +
 			  	'<span v-if="errors[name]" class="error">{{ errors[name] }}</span>' +
-			  	'<span v-else class="fielddescription"><small>{{ $t(description) }}</small></span>' +
+			  	'<span v-else class="fielddescription"><small>{{ description|translate }}</small></span>' +
 			  '</div>',
 	methods: {
 		update: function($event, name)
@@ -252,8 +263,8 @@ Vue.component('component-select', {
 Vue.component('component-checkbox', {
 	props: ['class', 'id', 'description', 'readonly', 'required', 'disabled', 'label', 'checkboxlabel', 'name', 'type', 'value', 'errors'],
 	template: '<div class="large">' +
-				'<label>{{ $t(label) }}</label>' +
-				'<label class="control-group">{{ checkboxlabel }}' +
+				'<label>{{ label|translate }}</label>' +
+				'<label class="control-group">{{ checkboxlabel|translate }}' +
 				  '<input type="checkbox"' + 
 					' :id="id"' +
 					' :readonly="readonly"' +
@@ -264,7 +275,7 @@ Vue.component('component-checkbox', {
 				    ' @change="update($event, value, name)">' +				
 			  	  '<span class="checkmark"></span>' +
 			  	  '<span v-if="errors[name]" class="error">{{ errors[name] }}</span>' +
-				  '<span v-else class="fielddescription"><small>{{ $t(description) }}</small></span>' +
+				  '<span v-else class="fielddescription"><small>{{ description|translate }}</small></span>' +
 			  	'</label>' +  
 			  '</div>',
 	methods: {
@@ -278,7 +289,7 @@ Vue.component('component-checkbox', {
 Vue.component('component-checkboxlist', {
 	props: ['class', 'description', 'readonly', 'required', 'disabled', 'label', 'checkboxlabel', 'options', 'name', 'type', 'value', 'errors'],
 	template: '<div class="large">' +
-				'<label>{{ $t(label) }}</label>' +
+				'<label>{{ label|translate }}</label>' +
 				'<label v-for="option, optionvalue in options" class="control-group">{{ option }}' +
 				  '<input type="checkbox"' + 
 					' :id="optionvalue"' +
@@ -287,7 +298,7 @@ Vue.component('component-checkboxlist', {
 				  	' @change="update($event, value, optionvalue, name)">' +
 			  	  '<span class="checkmark"></span>' +
 			  	  '<span v-if="errors[name]" class="error">{{ errors[name] }}</span>' +
-			  	  '<span v-else class="fielddescription"><small>{{ $t(description) }}</small></span>' +
+			  	  '<span v-else class="fielddescription"><small>{{ description|translate }}</small></span>' +
 			  '</div>',
 	methods: {
 		update: function($event, value, optionvalue, name)
@@ -305,7 +316,7 @@ Vue.component('component-checkboxlist', {
 Vue.component('component-radio', {
 	props: ['class', 'id', 'description', 'readonly', 'required', 'disabled', 'options', 'label', 'name', 'type', 'value', 'errors'],
 	template: '<div class="large">' +
-				'<label>{{ $t(label) }}</label>' +
+				'<label>{{ label|translate }}</label>' +
 				'<label v-for="option,optionvalue in options" class="control-group">{{ option }}' +
 				  '<input type="radio"' + 
 					' :id="id"' +
@@ -318,7 +329,7 @@ Vue.component('component-radio', {
 				  	' @change="update($event, value, name)">' +				
 			  	  '<span class="radiomark"></span>' +
 			  	  '<span v-if="errors[name]" class="error">{{ errors[name] }}</span>' +
-				  '<span v-else class="fielddescription"><small>{{ $t(description) }}</small></span>' +
+				  '<span v-else class="fielddescription"><small>{{ description|translate }}</small></span>' +
 			  	'</label>' +  
 			  '</div>',
 	methods: {
@@ -340,9 +351,9 @@ Vue.component('tab-meta', {
                 	'v-model="formdata[index]"' +
                 	'v-bind="field">' +
 				'</component>' + 
-				'<div v-if="saved" class="metaLarge"><div class="metaSuccess">{{ $t(\'Saved successfully\') }}</div></div>' +
-				'<div v-if="errors" class="metaLarge"><div class="metaErrors">{{ $t(\'Please correct the errors above\') }}</div></div>' +
-				'<div class="large"><input type="submit" @click.prevent="saveInput" :value="$t(\'save\')"></input></div>' +
+				'<div v-if="saved" class="metaLarge"><div class="metaSuccess">{{ \'Saved successfully\'|translate }}</div></div>' +
+				'<div v-if="errors" class="metaLarge"><div class="metaErrors">{{ \'Please correct the errors above\'|translate }}</div></div>' +
+				'<div class="large"><input type="submit" @click.prevent="saveInput" :value="\'save\'|translate"></input></div>' +
 			  '</form></section>',
 	methods: {
 		selectComponent: function(field)
@@ -357,11 +368,6 @@ Vue.component('tab-meta', {
 })
 
 let meta = new Vue({
-
-  	i18n: new VueI18n({
-    	locale: language,
-    	messages: vuejsLabels
-  	}),
     delimiters: ['${', '}'],
 	el: '#metanav',	
 	data: function () {
diff --git a/system/author/layouts/layoutEditor.twig b/system/author/layouts/layoutEditor.twig
index bce3438..13aa684 100644
--- a/system/author/layouts/layoutEditor.twig
+++ b/system/author/layouts/layoutEditor.twig
@@ -89,7 +89,6 @@
 			myaxios.defaults.baseURL =  "{{ base_url }}";
 		</script>		
 		<script src="{{ base_url }}/system/author/js/vue.min.js?20200405"></script>
-    	<script src="{{ base_url }}/system/author/js/vue-i18n.min.js?20200405"></script>
 		<script src="{{ base_url }}/system/author/js/autosize.min.js?20200405"></script>
 		<script src="{{ base_url }}/system/author/js/sortable.min.js?20200405"></script>
 		<script src="{{ base_url }}/system/author/js/vuedraggable.umd.min.js?20200405"></script>
@@ -97,7 +96,7 @@
 
 	    <script>
     	  	let language = {{ settings.language|json_encode() }};
-	      	let vuejsLabels = {{ settings.vuejsLabels|json_encode() }};
+          let labels = {{ settings.labels|json_encode() }};
       		let navigation = {{ navigation|json_encode() }};
 		</script>
     
diff --git a/system/author/partials/flash.twig b/system/author/partials/flash.twig
index 267b2f7..b9aa4a6 100644
--- a/system/author/partials/flash.twig
+++ b/system/author/partials/flash.twig
@@ -1,7 +1,7 @@
 {% if flash.getMessage('info') %}
 
 	<div class="alert alert-info" id="flash-message">
-		{{ flash.getMessage('info') | first }}
+		{{ __(flash.getMessage('info') | first) }}
 	</div>
 
 {% endif %}
@@ -9,7 +9,7 @@
 {% if messages.info %}
 
 	<div class="alert alert-error" id="flash-message">
-		{{ messages.info | first }}
+		{{ __(messages.info | first) }}
 	</div>
 
 {% endif %}
@@ -17,7 +17,7 @@
 {% if flash.getMessage('error') %}
 
 	<div class="alert alert-error" id="flash-message">
-		{{ flash.getMessage('error') | first }}
+		{{ __(flash.getMessage('error') | first) }}
 	</div>
 
 {% endif %}
@@ -25,7 +25,7 @@
 {% if messages.error %}
 
 	<div class="alert alert-error" id="flash-message">
-		{{ messages.error | first }}
+		{{ __(messages.error | first) }}
 	</div>
 
 {% endif %}
\ No newline at end of file