diff --git a/vuejs/resources/META-INF/plugin.xml b/vuejs/resources/META-INF/plugin.xml
index 5c4305cda43..eb129f94603 100644
--- a/vuejs/resources/META-INF/plugin.xml
+++ b/vuejs/resources/META-INF/plugin.xml
@@ -9,5 +9,6 @@
   <extensions defaultExtensionNs="com.intellij">
     <fileTypeFactory implementation="org.jetbrains.vuejs.VueFileTypeFactory" />
     <lang.parserDefinition language="Vue" implementationClass="org.jetbrains.vuejs.language.VueParserDefinition" />
+    <lang.syntaxHighlighterFactory language="Vue" implementationClass="org.jetbrains.vuejs.language.VueSyntaxHighlighterFactory" />
   </extensions>
 </idea-plugin>
\ No newline at end of file
diff --git a/vuejs/src/org/jetbrains/vuejs/language/VueHandledLexer.kt b/vuejs/src/org/jetbrains/vuejs/language/VueHandledLexer.kt
index 2e1ed6a4fba..d742eac1f0d 100644
--- a/vuejs/src/org/jetbrains/vuejs/language/VueHandledLexer.kt
+++ b/vuejs/src/org/jetbrains/vuejs/language/VueHandledLexer.kt
@@ -1,9 +1,31 @@
 package org.jetbrains.vuejs.language
 
+import com.intellij.lang.HtmlScriptContentProvider
+import com.intellij.lang.Language
+import com.intellij.lang.LanguageHtmlScriptContentProvider
+
 interface VueHandledLexer {
   fun seenScript():Boolean
   fun setSeenScriptType()
   fun seenStyle():Boolean
   fun setSeenStyleType()
   fun seenTag():Boolean
+  fun getScriptType(): String?
+  fun getStyleType(): String?
+
+  fun scriptContentViaLang(): HtmlScriptContentProvider? {
+    return Language.getRegisteredLanguages()
+      .filter { getScriptType()!!.equals(it.id, ignoreCase = true) }
+      .map { LanguageHtmlScriptContentProvider.getScriptContentProvider(it) }
+      .firstOrNull { it != null }
+  }
+
+  fun styleViaLang(default: Language?): Language? {
+    if (default != null && getStyleType() != null) {
+      default.dialects
+        .filter { getStyleType().equals(it.id, ignoreCase = true) }
+        .forEach { return it }
+    }
+    return null
+  }
 }
\ No newline at end of file
diff --git a/vuejs/src/org/jetbrains/vuejs/language/VueHighlightingLexer.kt b/vuejs/src/org/jetbrains/vuejs/language/VueHighlightingLexer.kt
new file mode 100644
index 00000000000..0643352a0a8
--- /dev/null
+++ b/vuejs/src/org/jetbrains/vuejs/language/VueHighlightingLexer.kt
@@ -0,0 +1,35 @@
+package org.jetbrains.vuejs.language
+
+import com.intellij.lang.HtmlScriptContentProvider
+import com.intellij.lang.Language
+import com.intellij.lexer.HtmlHighlightingLexer
+import com.intellij.psi.xml.XmlTokenType
+
+class VueHighlightingLexer : HtmlHighlightingLexer(), VueHandledLexer {
+  init {
+    registerHandler(XmlTokenType.XML_NAME, VueLangAttributeHandler())
+  }
+
+  override fun findScriptContentProvider(mimeType: String?): HtmlScriptContentProvider? {
+    val type = super.findScriptContentProvider(mimeType ?: "text/ecmascript-6")
+    return type ?: scriptContentViaLang()
+  }
+
+  override fun getStyleLanguage(): Language? {
+    return styleViaLang(ourDefaultStyleLanguage) ?: super.getStyleLanguage()
+  }
+
+  override fun seenScript() = seenScript
+  override fun seenStyle()= seenStyle
+  override fun seenTag() = seenTag
+  override fun getScriptType() = scriptType
+  override fun getStyleType() = styleType
+
+  override fun setSeenScriptType() {
+    seenContentType = true
+  }
+
+  override fun setSeenStyleType() {
+    seenStylesheetType = true
+  }
+}
\ No newline at end of file
diff --git a/vuejs/src/org/jetbrains/vuejs/language/VueLexer.kt b/vuejs/src/org/jetbrains/vuejs/language/VueLexer.kt
index a5746025edf..9a1deb6fa5c 100644
--- a/vuejs/src/org/jetbrains/vuejs/language/VueLexer.kt
+++ b/vuejs/src/org/jetbrains/vuejs/language/VueLexer.kt
@@ -1,10 +1,8 @@
 package org.jetbrains.vuejs.language
 
+import com.intellij.lang.HtmlScriptContentProvider
 import com.intellij.lang.Language
-import com.intellij.lang.LanguageHtmlScriptContentProvider
-import com.intellij.lexer.BaseHtmlLexer
 import com.intellij.lexer.HtmlLexer
-import com.intellij.psi.tree.IElementType
 import com.intellij.psi.xml.XmlTokenType
 
 class VueLexer : HtmlLexer(), VueHandledLexer {
@@ -12,42 +10,20 @@ class VueLexer : HtmlLexer(), VueHandledLexer {
     registerHandler(XmlTokenType.XML_NAME, VueLangAttributeHandler())
   }
 
-  override fun getCurrentScriptElementType(): IElementType? {
-    if (scriptType == null) {
-      val provider = BaseHtmlLexer.findScriptContentProvider("text/ecmascript-6")
-      return provider?.scriptElementType
-    }
-    val type = super.getCurrentScriptElementType()
-    if (type != null) return type
-    for (language in Language.getRegisteredLanguages()) {
-      if (scriptType!!.equals(language.id, ignoreCase = true)) {
-        val scriptContentProvider = LanguageHtmlScriptContentProvider.getScriptContentProvider(language)
-        if (scriptContentProvider != null) {
-          return scriptContentProvider.scriptElementType
-        }
-      }
-    }
-    return null
+  override fun findScriptContentProvider(mimeType: String?): HtmlScriptContentProvider? {
+    val type = super.findScriptContentProvider(mimeType ?: "text/ecmascript-6")
+    return type ?: scriptContentViaLang()
   }
 
   override fun getStyleLanguage(): Language? {
-    if (ourDefaultStyleLanguage != null && styleType != null) {
-      for (language in ourDefaultStyleLanguage!!.dialects) {
-        if (styleType.equals(language.id, ignoreCase = true)) {
-          return language
-        }
-      }
-    }
-    return super.getStyleLanguage()
+    return styleViaLang(ourDefaultStyleLanguage) ?: super.getStyleLanguage()
   }
 
-  override fun seenScript(): Boolean {
-    return seenScript
-  }
-
-  override fun seenStyle(): Boolean {
-    return seenStyle
-  }
+  override fun seenScript() = seenScript
+  override fun seenStyle()= seenStyle
+  override fun seenTag() = seenTag
+  override fun getScriptType() = scriptType
+  override fun getStyleType() = styleType
 
   override fun setSeenScriptType() {
     seenContentType = true
@@ -57,7 +33,4 @@ class VueLexer : HtmlLexer(), VueHandledLexer {
     seenStylesheetType = true
   }
 
-  override fun seenTag(): Boolean {
-    return seenTag
-  }
 }
diff --git a/vuejs/src/org/jetbrains/vuejs/language/VueSyntaxHighlighterFactory.kt b/vuejs/src/org/jetbrains/vuejs/language/VueSyntaxHighlighterFactory.kt
new file mode 100644
index 00000000000..3a12073897d
--- /dev/null
+++ b/vuejs/src/org/jetbrains/vuejs/language/VueSyntaxHighlighterFactory.kt
@@ -0,0 +1,16 @@
+package org.jetbrains.vuejs.language
+
+import com.intellij.ide.highlighter.HtmlFileHighlighter
+import com.intellij.lexer.Lexer
+import com.intellij.openapi.fileTypes.SingleLazyInstanceSyntaxHighlighterFactory
+import com.intellij.openapi.fileTypes.SyntaxHighlighter
+
+class VueSyntaxHighlighterFactory : SingleLazyInstanceSyntaxHighlighterFactory() {
+  override fun createHighlighter(): SyntaxHighlighter {
+    return object : HtmlFileHighlighter() {
+      override fun getHighlightingLexer(): Lexer {
+        return VueHighlightingLexer()
+      }
+    }
+  }
+}