PHPStorm Vue Syntax Highlighting

Hi! I'm following along with the Learn Vue 2 series. In episode 7 we finally blast the javascript code into its own .js file.

When I do this the icon in the project panel is the Javascript file icon. I'm assuming the syntax highlighting I'm getting is also for js.

I want the syntax highlighting to be for Vue. How do I get the IDE to show me Vue syntax highlighting on the main.js file?

I tried changing the file extension to .vue , this changed the icon next to the file name in the Project panel to the Vue icon, but provided no syntax highlighting whatsoever.

I'm using PHP Storm 2018.3.6 and "Vue.js" is listed under installed plugins.