Throws error on vue shorthand attributes

[urbantrout]

<button @click="doSomeVueStuff">OK</button>

The above code throws an error. A workaround is to use v-on:click instead of @click

https://vuejs.org/v2/guide/syntax.html#v-on-Shorthand

[hansgrinwis]

Additionally, v-on:click throws an error when an event modifier is present. As in:

<a href="" v-on:click.prevent="doSomeVueStuff">OK</a>

https://vuejs.org/v2/guide/events.html#Event-Modifiers

[terryupton]

Seeing the same isses with Alpine JS too.

["ERROR" - 6:19:41 PM] Error formatting document.
Error: ERROR: Expected an Identifier
  192 |                 <div x-data="getCheckedCount()"
  193 |         x-init="getChecked()"
> 194 |         x-on:item-selected.window="getChecked()"
      |                           ^
  195 |         class="pl-6 pt-6 font-medium"
  196 |         id="courseTotals"
  197 | >

[dnnsjsk]

Are there any ways around this?

[drdogbot7]

same issue using AlpineJS… which makes sense, because it has a very similar syntax.

[dnnsjsk]

I wish there was a way to just ignore the attributes, {# prettier-ignore #} is not working here, unfortunately.

Anyone here able to write up a plugin? This codebase is a bit beyond me..

[hansgrinwis]

As twig is supercharged HTML, <!-- prettier-ignore --> should work.

(Please note that if you do not strip HTML comments in your build process, it will end up in the code sent to the browser. Of course, when prettifying HTML and stripping HTML comments in your build process, do the stripping after Prettier performs its magic. 🙄)

[solidevolution]

As twig is supercharged HTML, <!-- prettier-ignore --> should work.

(Please note that if you do not strip HTML comments in your build process, it will end up in the code sent to the browser. Of course, when prettifying HTML and stripping HTML comments in your build process, do the stripping after Prettier performs its magic. 🙄)

Doesn't work, tested with twig and alpinejs