Allow themes to style Vue directives separately

[icarusgk]

This changes the tree-sitter capture for Vue directive names (v-if, v-model, v-for, etc.) from @keyword to @keyword.directive.

Motivation

Currently, Vue directives like v-if and v-model are captured as @keyword, making them visually identical to HTML attributes, not that there's something wrong with that but because they're being captured as @keyword it makes it impossible for themes to style them differently, and they often need to style the attributes differently in order for the directives be styled differently.

@keyword.directive is already used by other languages for similar constructs (e.g., preprocessor directives). With this change, theme authors can distinguish Vue template directives from language-level keywords.

Breaking changes?

None! Themes that don't define keyword.directive will fall back to keyword styling, so this is a non-breaking change for existing themes.

[cla-bot]

We require contributors to sign our Contributor License Agreement, and we don't have @icarusgk on file. You can sign our CLA at https://zed.dev/cla. Once you've signed, post a comment here that says '@cla-bot check'.

[icarusgk]

@cla-bot check

[cla-bot]

The cla-bot has been summoned, and re-checked this pull request!

[MrSubidubi]

Thanks! And congrats to your first contribution! 🎉