How can I enable syntax highlighting for .vue file

Question

I'm starting up with Vue.js. The first problem I've run into is that my IDE (Atom) doesn't beautify my .vue files. It's all just white text.

How can I make Atom highlight .vue files properly?

Answer 1

Use in your command prompt:

apm install language-vue

for syntax highlighting.

There is another Atom package which seems to only beautify it but doesn't do syntax highlighting:

apm install vue-format

You may need to exit Atom and then restart it.

Answer 2

The Vue.js project maintains Awesome Vue.js, "a curated list of awesome things related to Vue.js".

This includes a list of useful Atom packages for Vue.js:

• [e-mail] - Vue component file syntax for Atom.
• [e-mail] - Adds syntax highlighting to Vue Component files in Atom.
• [e-mail] - Vue.js 1.0+ autocomplete for Atom.
• [e-mail] - Atom snippets for Vue component files.
• [e-mail] - Auto compile vue file on save.
• [e-mail] - Atom.io package to lint Sass/SCSS in .vue files.
• [e-mail] - Atom snippets for javascript and components, including lifecycle hooks, directives, properties, vuex, vue-router, vue-i18n support.
• [e-mail] - Vue.js 2.0+ autocomplete for Atom.

Note that currently the language-vue and language-vue-component do not play nicely together, as discussed here. For now, for syntax highlighting in Atom your best bet is language-vue only.

Answer 3

language-vue package adds syntax highlighting to Vue components.

There is also another package to beautify your code. Install atom-beautify package. It has Vue beautifier preinstalled.