Missing support for .vue files

[cor]

Please add support for .vue files

--- Want to back this issue? **[Post a bounty on it!](https://www.bountysource.com/issues/28747938-missing-support-for-vue-files?utm_campaign=plugin&utm_content=tracker%2F535900&utm_medium=issues&utm_source=github)** We accept bounties via [Bountysource](https://www.bountysource.com/?utm_campaign=plugin&utm_content=tracker%2F535900&utm_medium=issues&utm_source=github).

[joshuajohnson814]

+1

[rootman]

+1 ;)

[ghost]

Yes, it would be great!

[sergeche]

https://github.com/emmetio/emmet-atom#tab-key

[joshuajohnson814]

Adding the following to my keymap.cson did the trick

'atom-text-editor[data-grammar~="vue"]:not([mini])':
    'tab': 'emmet:expand-abbreviation-with-tab'

[zhang6464]

@joshuajohnson814 I added this, and worked well for html expanding, while failed for css in style tag,
e.g
<style media="screen" lang="less">
.passenger-statu {
w10 // => <w10></w10>
}
</style>

[sqal]

@joshuajohnson814 Thank you, that works in vue template tag, but now emmet also expands in script tag so when i type log and hit tab, it expands to <log></log> instead of console.log(). Can I somehow prevent this behavior?

someFile.vue

<template>
...
</template>

<script>
...
</script>

[clessg]

This would be appreciated. For now I'm just using ctrl-e instead of tab.

[ednilsonamaral]

@joshuajohnson814 thanks, man. That works for me!

[rayfranco]

When using @joshuajohnson814 solution with a <style lang="stylus"> it seems that Emmet interpret the scope as normal css. But these are the scopes returned by Atom:

• text.html.vue
• source.stylus.embedded.html

So I guess that Emmet is interpreting the whole document as html and take what is inside the <style> tag as CSS instead of looking for it's proper scope. It should be the same behavior with any other preprocessors.
There is no fix for this with the settings, this should be updated in the core of emmet-atom to read embedded scopes instead of interpreting it by itself.

Does that makes sense @sergeche?

[Achieve777]

It didn't work well with using your method, neither ctrl+b or tab

[sergeche]

Working on a new Emmet implementation, will fix that in new version

[JanlyH]

@joshuajohnson814 Thank you!

[DiederikvandenB]

Any news on this :)? I am waaaaay too used to using tab to suddenly start using ctrl + e.

[chenwenxian]

language-vue-component. Adds syntax highlighting to Vue Component files in Atom.

[sergeche]

Check out upcoming new Atom plugin with Emmet 2 onboard, seems like Vue works fine there: https://github.com/emmetio/atom-plugin

[chenwenxian]

Very good!

[daphen]

Is it possible to get the fuzzy search and tab to expand?
'atom-text-editor:not([mini])': 'tab': 'emmet:expand-abbreviation-with-tab'
Does nothing with this plugin.
Stylus works in vue-files now though, so that's good.
I would want it to instantly expand, without a drop down, like, if I write oh and then expand, I'll get a dropdown where I can choose overflow: hidden and if I pick it, it will paste and hidden will be selected, so I have to manually deselect it before going to a new line where as before I would oh tab, overflow hidden is pasted and I instantly enter to go down a line. I see the point of this but it's not my personal preference.

[sergeche]

@daphen The behaviour of tab expander (including expanding without completions) will be tuned later. There could be problems for users who don’t want to expand Emmet but insert tab instead

[daphen]

@sergeche I see, cool, and it's not possible to set that up manually right away?

[sergeche]

@daphen not yet, sorry. Still no dedicated command to expand abbreviation by handle, only via autocomplete popup

[daphen]

@sergeche Alright, do you have an EST? Ballpark?

[sergeche]

@daphen not yet, doing this project on my spare time, very busy at my job

[daphen]

@sergeche Ah, I see. Best of luck then.

[JsonHunt]

For me replacing .source.vue with .text.html.vue (in snippets.cson file) did the trick