diff --git a/src/directives/focus.js b/src/directives/focus.js
new file mode 100644
index 000000000..ac5a5460e
--- /dev/null
+++ b/src/directives/focus.js
@@ -0,0 +1,12 @@
+export default {
+	// When the bound element is inserted into the DOM...
+	inserted: (el, {modifiers}) => {
+		// Focus the element only if the viewport is big enough
+		// auto focusing elements on mobile can be annoying since in these cases the
+		// keyboard always pops up and takes half of the available space on the screen.
+		// The threshhold is the same as the breakpoints in css.
+		if (window.innerWidth > 769 || (typeof modifiers.always !== 'undefined' && modifiers.always)) {
+			el.focus()
+		}
+	},
+}
diff --git a/src/main.js b/src/main.js
index e502bcffd..a34dd7ce9 100644
--- a/src/main.js
+++ b/src/main.js
@@ -144,19 +144,8 @@ Vue.use(VTooltip, {defaultHtml: false})
 
 Vue.use(vueShortkey)
 
-// Set focus
-Vue.directive('focus', {
-	// When the bound element is inserted into the DOM...
-	inserted: (el, {modifiers}) => {
-		// Focus the element only if the viewport is big enough
-		// auto focusing elements on mobile can be annoying since in these cases the
-		// keyboard always pops up and takes half of the available space on the screen.
-		// The threshhold is the same as the breakpoints in css.
-		if (window.innerWidth > 769 || (typeof modifiers.always !== 'undefined' && modifiers.always)) {
-			el.focus()
-		}
-	},
-})
+import focus from '@/directives/focus'
+Vue.directive('focus', focus)
 
 Vue.mixin({
 	methods: {