diff --git a/js-src/app.js b/js-src/app.js
index b8fd7a308..9ede5a443 100644
--- a/js-src/app.js
+++ b/js-src/app.js
@@ -35,6 +35,17 @@ define(function (require) {
 
 			// Setup Vue
 			var Vue = require('vue');
+			Vue.mixin({
+				methods: {
+					t(app, text, vars, count, options) {
+						return OC.L10N.translate(app, text, vars, count, options);
+					},
+					n(app, textSingular, textPlural, count, vars, options) {
+						return OC.L10N.translatePlural(app, textSingular, textPlural, count, vars, options);
+					}
+				}
+			});
+
 			this.vm = new Vue(require('./components/root.vue'));
 
 			// Initial call to the notification endpoint
diff --git a/js-src/components/notification.vue b/js-src/components/notification.vue
index 414a20114..4be15e64f 100644
--- a/js-src/components/notification.vue
+++ b/js-src/components/notification.vue
@@ -3,7 +3,7 @@
 		<div class="notification-heading">
 			<span class="notification-time has-tooltip live-relative-timestamp" :data-timestamp="timestamp" :title="absoluteDate">{{relativeDate}}</span>
 			<div class="notification-delete" @click="onDismissNotification">
-				<span class="icon icon-close svg" :title="t_dismiss"></span>
+				<span class="icon icon-close svg" :title="t('notifications', 'Dismiss')"></span>
 			</div>
 		</div>
 		<a v-if="useLink" :href="link" class="notification-subject full-subject-link">
@@ -49,9 +49,6 @@
 		_$el: null,
 
 		computed: {
-			t_dismiss: function() {
-				return t('notifications', 'Dismiss');
-			},
 			timestamp: function() {
 				return moment(this.datetime).format('X') * 1000;
 			},
diff --git a/js-src/components/root.vue b/js-src/components/root.vue
index 2718c2f07..1706e5efd 100644
--- a/js-src/components/root.vue
+++ b/js-src/components/root.vue
@@ -1,14 +1,14 @@
 <template>
 	<div v-if="!shutdown" class="notifications">
 		<div class="notifications-button menutoggle" :class="{ hasNotifications: notifications.length }">
-			<img class="svg" alt="" :title="t_notifications" :src="iconPath">
+			<img class="svg" alt="" :title="t('notifications', 'Notifications')" :src="iconPath">
 		</div>
 		<div class="notification-container">
 			<div class="notification-wrapper" v-if="notifications.length">
 				<notification v-for="(n, index) in notifications" v-bind="n" :key="n.notification_id" @remove="onRemove" ></notification>
 			</div>
 			<div class="emptycontent" v-else>
-				<h2>{{t_empty}}</h2>
+				<h2>{{ t('notifications', 'No notifications') }}</h2>
 			</div>
 		</div>
 	</div>
@@ -35,12 +35,6 @@
 		_$container: null,
 
 		computed: {
-			t_empty: function() {
-				return t('notifications', 'No notifications');
-			},
-			t_notifications: function() {
-				return t('notifications', 'Notifications');
-			},
 			iconPath: function() {
 				var iconPath = 'notifications';