HTML syntax highlighting in Vue templates

Question

I'm following the Vue3 tutorial on laracast.com. I wrote the following button template:

export default {
  template: `
    <button 
      :class="{
        'border rounded px-5 py-2 disabled:cursor-not-allowed' : true,
        'bg-blue-600 hover:bg-blue-700' : type == 'primary',
        'bg-purple-200 hover:bg-purple-400' : type == 'secondary',
        'bg-gray-200 hover:bg-gray-400' : type == 'muted',
        'is-loading' : processing
      }" 
      :disabled="processing"
    >
      <slot />
    </button>
  `,

  props: {
    type: { // name of the prop
      type: String, // the real type of the prop..
      default: 'primary'
    },
    
    processing: {
      type: Boolean,
      default: false
    }
  },
};

Unfortunately VS Code doesn’t apply any syntax highlighting to the HTML part of the template:

I have the following extensions installed:

• Vue official extension
• Vue 3 Support - All In One
• Vue VSCode Snippets
• Vue Extension Box

Is there a way to have syntax highlighting in these kind of templates? How do you deal with this?

The same applies to blank HTML code:

Answer 1

You can try to use the "Vue Inline Template" extension for VSCode. It seems to work for the examples you have given.