source.vue doesn't work in my vue snippet in sublime text3?

Question

I have a very annoying problem with my sublime snippet about .vue type flie.
Say I want to add a vue snippet in sublime on my own, and I want the vue tabtrigger below works in vue type file only.
I add these codes into my vue.sublime-snippet:

<snippet>
    <content><![CDATA[
        Some text
]]></content>
    <tabTrigger>vue</tabTrigger>
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <scope>source.vue</scope>
</snippet>

After saving this file in my sublime folder, I create a test.vue file and type vue and then press Tab.
But nothing happened. What I expected is Some text could appear after tabbing in test.vue file.
Why doesn't my snippet work on vue file?

PS: I changed source.vue into source.js source.php,etc in my snippet and tested in corresponding js, php file, they all work fine. Only vue didn't work out. Is there anything wrong with sublime identifying vue type file? How to solve this problem?

score 5 · Answer 1 · answered Jul 29 '17 at 14:46

The correct scope selector to use for Vue.js is text.html.vue, which can be seen by creating a new, empty tab in ST, setting the syntax to Vue.js and then going to the Tools menu -> Developer -> Show Scope Name or by checking the syntax definition: https://github.com/vuejs/vue-syntax-highlight/blob/f87459fc1bf26a4b8e50e232757d4682892c971d/vue.tmLanguage#L1465-L1466

score 0 · Answer 2 · answered Jul 29 '21 at 11:50

I recently faced the same issue and I used source.js as the scope selector.

<snippet>
<content><![CDATA[
    your snippet here
 ]]></content>
   <tabTrigger>vue</tabTrigger>
   <!-- Optional: Set a scope to limit where the snippet will trigger -->
   <scope>source.js</scope>
 </snippet>

source.vue doesn't work in my vue snippet in sublime text3?

2 Answers2