Vetur: Syntax highlight for script tag content in .vue files disappeared when adding a template tag with v-slot:namedSlot

Created on 25 Jul 2019  路  4Comments  路  Source: vuejs/vetur

  • [x] I have searched through existing issues
  • [x] I have read through docs
  • [x] I have read FAQ

Info

  • Platform: Linux Ubuntu 19.04
  • Vetur version: 0.21.1
  • VS Code version: 1.36.1

Problem

Syntax highlight for script tag content in .vue files disappeared when adding a template tag with v-slot:namedSlot

Reproducible Case

Create a single file component that has named slots. Import the component inside another component, reference it in template tags and insert template tags with v-slot:slotName attribute and the content of script tag looses its syntax highlight. See images.

Imgur
Imgur

duplicate

Most helpful comment

@luxwarp I just met the same problem as yours. Thanks for reminding me to check the template tag.
I had a template tag in the template, but without v-slot direct. Like what you do, comment it, and things go well.
So I guess it may be caused by the format of the template tag. After trying some format adjustment, I found it.

before(bad situation):

<template
  >some code</template
>

after(good situation):

<template
  >some code</template>

Yeah, it's exactly the </template>鈥榮 > in a new line cause the problem.
If someone makes one of his </template>'s > in a new line, including the .vue file鈥檚 outer template tag, congratulation, he reproduces the case.
That's the problem.

All 4 comments

@luxwarp I just met the same problem as yours. Thanks for reminding me to check the template tag.
I had a template tag in the template, but without v-slot direct. Like what you do, comment it, and things go well.
So I guess it may be caused by the format of the template tag. After trying some format adjustment, I found it.

before(bad situation):

<template
  >some code</template
>

after(good situation):

<template
  >some code</template>

Yeah, it's exactly the </template>鈥榮 > in a new line cause the problem.
If someone makes one of his </template>'s > in a new line, including the .vue file鈥檚 outer template tag, congratulation, he reproduces the case.
That's the problem.

Very interesting! After som pokeing around in my codes i finally got it working by just change my code to this and make sure that eslint/prettier did not try to format the code, and it does not :).
So its both a "bug" for prettier in vue projects and maybe vetur also to not be able to handle prettiers wierd formatting :D

<NoListItemsFound v-else>
    <template v-slot:title>
      No to-do's found
    </template>
    <template v-slot:subtitle>
      Create one now!
    </template>
  </NoListItemsFound>

I just heard from one of my colleagues, prettier makes such formatting to get rid of the spaces on the two side of the content when vue complies the template. He thinks it's a 'bug' of vue. Funny 馃槂
So prittier may act reasonable here.

Duplicate of #1211. I'm afraid there's no easy fix in TextMate grammar and you would have to wait for the upcoming semantic syntax highlighting in VS Code.

Was this page helpful?
0 / 5 - 0 ratings