Support Composition Api Syntax

[jjpark78]

Do this plugin has a plan support composition api syntax highlight ?

it will be very nice.

[leafOfTree]

Hey, thank you for mentioning it. Of course we should support it.
I've not learned and used the new composition API yet. I just glanced at its documentation and tried to open its basic example in vim . It seems that we will need to support the coming setup and related staff syntax highlight.

[leafOfTree]

Hi, I've added Vue3 composition API syntax highlight based on https://v3.vuejs.org/api/composition-api.html. They were tested in a demo Vue3 project created by the latest vue-cli.

setup ref reactive toRefs watch computed getCurrentInstance onBeforeMount onMounted onBeforeUpdate onUpdated onBeforeUnmount onUnmounted onErrorCaptured onRenderTracked onRenderTriggered

Since it's new, maybe we should keep this issue open and update the plugin if something changes.

[Mootook]

@leafOfTree I'm wondering if there's a js plugin you recommend to use in conjunction with this plugin? A lot of my project is in vue files, but I often have pure js files for some utilites which don't get picked up without a js plugin. I was using pangloss/vim-javascript, but that seems to conflict with this plugin:

[leafOfTree]

@Mootook, thank you for the feedback. I'm using Vim8.2 without any js plugin. The default syntax with a little adjustment works well for me. As you mentioned, pangloss/vim-javascript is the most popular plugin which I try to support. If you find any issues with the two, please feel free to let me know.

By the way, I just fixed the issue which is shown in the screenshot.
Also, please note that let g:vim_vue_plugin_highlight_vue_keyword = 1 is required to enable the keyword syntax.

[Mootook]

@leafOfTree Thanks! Really appreciate the work on this plugin.

Also, just as a note, seems like vue-next (vue3) has some experimental changes to the setup/composition API out right now. https://github.com/vuejs/rfcs/blob/script-setup-2/active-rfcs/0000-script-setup.md. Probably worth waiting till its official though.

[leafOfTree]

I see. We could wait until it's stable.

[Mootook]

#24 (comment)
It seems the features features have been removed from 'experimental' status in 3.2 stable release.

[leafOfTree]

Exactly. I see that below are considered stable.

• <style> v-bind: SFC style CSS variable injection (new edition) vuejs/rfcs#231
• <script setup> <script setup> vuejs/rfcs#227

The documentations are

• https://v3.vuejs.org/api/sfc-style.html#style-scoped
• https://v3.vuejs.org/api/sfc-script-setup.html#basic-syntax

I'll try to support these new syntax highlights.

[leafOfTree]

Hi, @Mootook . I've added these new API syntaxes. Would you like to help test it and let me know if it works?

[Mootook]

@leafOfTree, I've been using them in my team's project since they were released. Seems good!

[leafOfTree]

Great! Thanks a lot.