No Vue syntax highlighting


#1

I can’t seem to get any Vue syntax highlighting packages to work.
I found 2 that looked promising: https://atom.io/packages/language-vue and https://atom.io/packages/language-vue-component and the language detector changes to Vue component, but all of my code is still monotone grey/white:


Does anyone know what might be the problem here, and what I can do to fix it?


#2

Open up the dev tools (apparently alt-cmd-i for Mac) and search for something unique in the buffer (like #app-2) to easily get to where the text is defined. Please post some screenshots of that.


#3

This bit? @DamnedScholar


#4

Yes, that exactly. I don’t know Vue at all, but my scan of the language-vue package suggests that JavaScript in .vue files should be surrounded by <script> tags (the definition is here).


#6

You just have your syntax wrong a bit. What you have typed is for regular .js files. For vue-components (files ending in .vue) you need to follow this format:


#7

I have a Vue file from a tutorial that is also not working with syntax highlighting:

 <template>
  <div id="app">
    <img src="./assets/logo.png">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
      <li><a href="https://chat.vuejs.org" target="_blank">Community Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
      <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
      <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<style lang="scss">
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

Thoughts?


#8

The forum obviously doesn’t highlight Vue code, so posting it on the forum doesn’t help me see what you’re seeing in Atom. A screenshot of your Atom window would be better.


#9

@DamnedScholar - My prior code submission was meant to demonstrate that a properly formatted Vue file (as suggested by @mindpixel-labs) was also not highlighted properly. I’ve attached a screenshot of Atom. If it matters I’m also using Atom-Beautify.


#10

If it helps anyone else, I ended up borrowing html syntax highlighting and applying it to files with extension .vue by modifying Atom’s config.cson file thusly:

core:
  customFileTypes:
    'text.html.basic': [
      'vue'
  ]

You may need to close your .vue files and restart Atom to see the changes. To edit your config.cson file via the Command Palette, press Cmd+Shift+P, type open config, and press Enter. There is also a Config option within the Atom menu item dropdown.


#11

And, as you can see in your screenshots, what your prior code submission could not demonstrate was the fact that your .vue files were being matched as Plain Text, which is the piece of information that more experienced uses such as myself need to recommend a solution. In your case, you should download and use the language-vue package that the original poster is using. Since you don’t have that package installed, your environment is not the same as theirs and your code is unhighlighted for completely different reasons.