# [PackageDev] target_format: plist, ext: tmLanguage
---
name: Vue Component
scopeName: text.html.vue
fileTypes: [vue]
uuid: 5512c10d-4cc5-434c-b8fc-53b912f55ab3

patterns:
- include: '#vue-interpolations'

- name: meta.tag.any.html
  begin: (<)([a-zA-Z0-9:-]++)(?=[^>]*></\2>)
  beginCaptures:
    '1': {name: punctuation.definition.tag.begin.html}
    '2': {name: entity.name.tag.html}
  end: (>)(<)(/)(\2)(>)
  endCaptures:
    '1': {name: punctuation.definition.tag.end.html}
    '2': {name: punctuation.definition.tag.begin.html meta.scope.between-tag-pair.html}
    '3': {name: punctuation.definition.tag.begin.html}
    '4': {name: entity.name.tag.html}
    '5': {name: punctuation.definition.tag.end.html}
  patterns:
  - include: '#tag-stuff'

- name: meta.tag.preprocessor.xml.html
  begin: (<\?)(xml)
  end: (\?>)
  captures:
    '1': {name: punctuation.definition.tag.html}
    '2': {name: entity.name.tag.xml.html}
  patterns:
  - include: '#tag-generic-attribute'
  - include: '#string-double-quoted'
  - include: '#string-single-quoted'

- name: comment.block.html
  begin: <!--
  end: --\s*>
  captures:
    '0': {name: punctuation.definition.comment.html}
  patterns:
  - name: invalid.illegal.bad-comments-or-CDATA.html
    match: --

- name: meta.tag.sgml.html
  begin: <!
  end: '>'
  captures:
    '0': {name: punctuation.definition.tag.html}
  patterns:
  - name: meta.tag.sgml.doctype.html
    begin: (?i:DOCTYPE)
    end: (?=>)
    captures:
      '1': {name: entity.name.tag.doctype.html}
    patterns:
    - name: string.quoted.double.doctype.identifiers-and-DTDs.html
      match: '"[^">]*"'
  - name: constant.other.inline-data.html
    begin: \[CDATA\[
    end: ']](?=>)'
  - name: invalid.illegal.bad-comments-or-CDATA.html
    match: (\s*)(?!--|>)\S(\s*)

- name: text.slm.embedded.html
  begin: (?:^\s+)?(<)((?i:template))\b(?=[^>]*lang=(['"])slm\1?)
  end: (</)((?i:template))(>)(?:\s*\n)?
  captures:
    '1': {name: punctuation.definition.tag.begin.html}
    '2': {name: entity.name.tag.style.html}
    '3': {name: punctuation.definition.tag.html}
  patterns:
  - include: '#tag-stuff'
  - begin: (>)
    beginCaptures:
      '1': {name: punctuation.definition.tag.end.html}
    end: (?=</(?i:template))
    patterns:
    - include: text.slm

- name: text.jade.embedded.html
  begin: (?:^\s+)?(<)((?i:template))\b(?=[^>]*lang=(['"])jade\1?)
  end: (</)((?i:template))(>)(?:\s*\n)?
  captures:
    '1': {name: punctuation.definition.tag.begin.html}
    '2': {name: entity.name.tag.style.html}
    '3': {name: punctuation.definition.tag.html}
  patterns:
  - include: '#tag-stuff'
  - begin: (>)
    beginCaptures:
      '1': {name: punctuation.definition.tag.end.html}
    end: (?=</(?i:template))
    patterns:
    - include: text.jade

- name: text.pug.embedded.html
  begin: (?:^\s+)?(<)((?i:template))\b(?=[^>]*lang=(['"])pug\1?)
  end: (</)((?i:template))(>)(?:\s*\n)?
  captures:
    '1': {name: punctuation.definition.tag.begin.html}
    '2': {name: entity.name.tag.style.html}
    '3': {name: punctuation.definition.tag.html}
  patterns:
  - include: '#tag-stuff'
  - begin: (>)
    beginCaptures:
      '1': {name: punctuation.definition.tag.end.html}
    end: (?=</(?i:template))
    patterns:
    - include: text.pug


- name: source.stylus.embedded.html
  begin: (?:^\s+)?(<)((?i:style))\b(?=[^>]*lang=(['"])stylus\1?)
  end: (</)((?i:style))(>)(?:\s*\n)?
  captures:
    '1': {name: punctuation.definition.tag.begin.html}
    '2': {name: entity.name.tag.style.html}
    '3': {name: punctuation.definition.tag.html}
  patterns:
  - include: '#tag-stuff'
  - begin: (>)
    beginCaptures:
      '1': {name: punctuation.definition.tag.end.html}
    end: (?=</(?i:style))
    patterns:
    - include: source.stylus

- name: source.postcss.embedded.html
  begin: (?:^\s+)?(<)((?i:style))\b(?=[^>]*lang=(['"])postcss\1?)
  end: (</)((?i:style))(>)(?:\s*\n)?
  captures:
    '1': {name: punctuation.definition.tag.begin.html}
    '2': {name: entity.name.tag.style.html}
    '3': {name: punctuation.definition.tag.html}
  patterns:
  - include: '#tag-stuff'
  - begin: (>)
    beginCaptures:
      '1': {name: punctuation.definition.tag.end.html}
    end: (?=</(?i:style))
    patterns:
    - include: source.postcss

- name: source.sass.embedded.html
  begin: (?:^\s+)?(<)((?i:style))\b(?=[^>]*lang=(['"])sass\1?)
  end: (</)((?i:style))(>)(?:\s*\n)?
  captures:
    '1': {name: punctuation.definition.tag.begin.html}
    '2': {name: entity.name.tag.style.html}
    '3': {name: punctuation.definition.tag.html}
  patterns:
  - include: '#tag-stuff'
  - begin: (>)
    beginCaptures:
      '1': {name: punctuation.definition.tag.end.html}
    end: (?=</(?i:style))
    patterns:
    - include: source.sass

- name: source.scss.embedded.html
  begin: (?:^\s+)?(<)((?i:style))\b(?=[^>]*lang=(['"])scss\1?)
  end: (</)((?i:style))(>)(?:\s*\n)?
  captures:
    '1': {name: punctuation.definition.tag.begin.html}
    '2': {name: entity.name.tag.style.html}
    '3': {name: punctuation.definition.tag.html}
  patterns:
  - include: '#tag-stuff'
  - begin: (>)
    beginCaptures:
      '1': {name: punctuation.definition.tag.end.html}
    end: (?=</(?i:style))
    patterns:
    - include: source.css.scss

- name: source.less.embedded.html
  begin: (?:^\s+)?(<)((?i:style))\b(?=[^>]*lang=(['"])less\1?)
  end: (</)((?i:style))(>)(?:\s*\n)?
  captures:
    '1': {name: punctuation.definition.tag.begin.html}
    '2': {name: entity.name.tag.style.html}
    '3': {name: punctuation.definition.tag.html}
  patterns:
  - include: '#tag-stuff'
  - begin: (>)
    beginCaptures:
      '1': {name: punctuation.definition.tag.end.html}
    end: (?=</(?i:style))
    patterns:
    - include: source.css.less

- name: source.css.embedded.html
  begin: (?:^\s+)?(<)((?i:style))\b(?![^>]*/>)
  end: (</)((?i:style))(>)(?:\s*\n)?
  captures:
    '1': {name: punctuation.definition.tag.begin.html}
    '2': {name: entity.name.tag.style.html}
    '3': {name: punctuation.definition.tag.html}
  patterns:
  - include: '#tag-stuff'
  - begin: (>)
    beginCaptures:
      '1': {name: punctuation.definition.tag.end.html}
    end: (?=</(?i:style))
    patterns:
    - include: source.css

- name: source.ts.embedded.html
  begin: (?:^\s+)?(<)((?i:script))\b(?=[^>]*lang=(['"])ts\1?)
  beginCaptures:
    '1': {name: punctuation.definition.tag.begin.html}
    '2': {name: entity.name.tag.script.html}
  end: (?<=</(script|SCRIPT))(>)(?:\s*\n)?
  endCaptures:
    '2': {name: punctuation.definition.tag.html}
  patterns:
  - include: '#tag-stuff'
  - begin: (?<!</(?:script|SCRIPT))(>)
    end: (</)((?i:script))
    captures:
      '1': {name: punctuation.definition.tag.begin.html}
      '2': {name: entity.name.tag.script.html}
    patterns:
    - include: source.ts

- name: source.coffee.embedded.html
  begin: (?:^\s+)?(<)((?i:script))\b(?=[^>]*lang=(['"])coffee\1?)
  beginCaptures:
    '1': {name: punctuation.definition.tag.begin.html}
    '2': {name: entity.name.tag.script.html}
  end: (?<=</(script|SCRIPT))(>)(?:\s*\n)?
  endCaptures:
    '2': {name: punctuation.definition.tag.html}
  patterns:
  - include: '#tag-stuff'
  - begin: (?<!</(?:script|SCRIPT))(>)
    end: (</)((?i:script))
    captures:
      '1': {name: punctuation.definition.tag.begin.html}
      '2': {name: entity.name.tag.script.html}
    patterns:
    - include: source.coffee

- name: source.livescript.embedded.html
  begin: (?:^\s+)?(<)((?i:script))\b(?=[^>]*lang=(['"])livescript\1?)
  beginCaptures:
    '1': {name: punctuation.definition.tag.begin.html}
    '2': {name: entity.name.tag.script.html}
  end: (?<=</(script|SCRIPT))(>)(?:\s*\n)?
  endCaptures:
    '2': {name: punctuation.definition.tag.html}
  patterns:
  - include: '#tag-stuff'
  - begin: (?<!</(?:script|SCRIPT))(>)
    end: (</)((?i:script))
    captures:
      '1': {name: punctuation.definition.tag.begin.html}
      '2': {name: entity.name.tag.script.html}
    patterns:
    - include: source.livescript

- name: source.js.embedded.html
  begin: (<)((?i:script))\b(?![^>]*/>)(?![^>]*(?i:type.?=.?text/((?!javascript|babel|ecmascript).*)))
  beginCaptures:
    '1': {name: punctuation.definition.tag.begin.html}
    '2': {name: entity.name.tag.script.html}
  end: (?<=</(script|SCRIPT))(>)(?:\s*\n)?
  endCaptures:
    '2': {name: punctuation.definition.tag.html}
  patterns:
  - include: '#tag-stuff'
  - begin: (?<!</(?:script|SCRIPT))(>)
    end: (</)((?i:script))
    captures:
      '1': {name: punctuation.definition.tag.begin.html}
      '2': {name: entity.name.tag.script.html}
    patterns:
    - name: comment.line.double-slash.js
      match: (//).*?((?=</script)|$\n?)
      captures:
        '1': {name: punctuation.definition.comment.js}
    - name: comment.block.js
      begin: /\*
      end: \*/|(?=</script)
      captures:
        '0': {name: punctuation.definition.comment.js}
    - include: source.js

- name: meta.tag.structure.any.html
  begin: (</?)((?i:body|head|html)\b)
  end: (>)
  endCaptures:
    '1': {name: punctuation.definition.tag.end.html}
  captures:
    '1': {name: punctuation.definition.tag.begin.html}
    '2': {name: entity.name.tag.structure.any.html}
  patterns:
  - include: '#tag-stuff'

- name: meta.tag.block.any.html
  begin: (</?)((?i:address|blockquote|dd|div|dl|dt|fieldset|form|frame|frameset|h1|h2|h3|h4|h5|h6|iframe|noframes|object|ol|p|ul|applet|center|dir|hr|menu|pre)\b)
  beginCaptures:
    '1': {name: punctuation.definition.tag.begin.html}
    '2': {name: entity.name.tag.block.any.html}
  end: (>)
  endCaptures:
    '1': {name: punctuation.definition.tag.end.html}
  patterns:
  - include: '#tag-stuff'

- name: meta.tag.inline.any.html
  begin: (</?)((?i:a|abbr|acronym|area|b|base|basefont|bdo|big|br|button|caption|cite|code|col|colgroup|del|dfn|em|font|head|html|i|img|input|ins|isindex|kbd|label|legend|li|link|map|meta|noscript|optgroup|option|param|q|s|samp|script|select|small|span|strike|strong|style|sub|sup|table|tbody|td|textarea|tfoot|th|thead|title|tr|tt|u|var)\b)
  beginCaptures:
    '1': {name: punctuation.definition.tag.begin.html}
    '2': {name: entity.name.tag.inline.any.html}
  end: '((?: ?/)?>)'
  endCaptures:
    '1': {name: punctuation.definition.tag.end.html}
  patterns:
  - include: '#tag-stuff'

- name: meta.tag.other.html
  begin: (</?)([a-zA-Z0-9:-]+)
  beginCaptures:
    '1': {name: punctuation.definition.tag.begin.html}
    '2': {name: entity.name.tag.other.html}
  end: (>)
  endCaptures:
    '1': {name: punctuation.definition.tag.end.html}
  patterns:
  - include: '#tag-stuff'

- include: '#entities'

- name: invalid.illegal.incomplete.html
  match: <>

- name: invalid.illegal.bad-angle-bracket.html
  match: <

repository:
  vue-interpolations:
    patterns:
    - name: expression.embbeded.vue
      begin: \{\{\{?
      end: \}\}\}?
      beginCaptures:
        '0': {name: punctuation.definition.generic.begin.html}
      endCaptures:
        '0': {name: punctuation.definition.generic.end.html}
      patterns:
      - include: source.js

  vue-directives:
    name: meta.directive.vue
    begin: (?:\b(v-)|(:|@))([a-zA-Z\-]+)(?:\:([a-zA-Z\-]+))?(?:\.([a-zA-Z\-]+))*\s*(=)
    end: (?<='|")
    captures:
      '1': {name: entity.other.attribute-name.html}
      '2': {name: punctuation.separator.key-value.html}
      '3': {name: entity.other.attribute-name.html}
      '4': {name: entity.other.attribute-name.html}
      '5': {name: entity.other.attribute-name.html}
      '6': {name: punctuation.separator.key-value.html}
    patterns:
    - name: source.directive.vue
      begin: '"'
      beginCaptures:
        '0': {name: punctuation.definition.string.begin.html}
      end: '"'
      endCaptures:
        '0': {name: punctuation.definition.string.end.html}
      patterns:
      - include: source.js
    - name: source.directive.vue
      begin: ''''
      beginCaptures:
        '0': {name: punctuation.definition.string.begin.html}
      end: ''''
      endCaptures:
        '0': {name: punctuation.definition.string.end.html}
      patterns:
      - include: source.js

  entities:
    patterns:
    - name: constant.character.entity.html
      match: (&)([a-zA-Z0-9]+|#[0-9]+|#x[0-9a-fA-F]+)(;)
      captures:
        '1': {name: punctuation.definition.entity.html}
        '3': {name: punctuation.definition.entity.html}
    - name: invalid.illegal.bad-ampersand.html
      match: '&'

  string-double-quoted:
    name: string.quoted.double.html
    begin: '"'
    beginCaptures:
      '0': {name: punctuation.definition.string.begin.html}
    end: '"'
    endCaptures:
      '0': {name: punctuation.definition.string.end.html}
    patterns:
    - include: '#vue-interpolations'
    - include: '#entities'

  string-single-quoted:
    name: string.quoted.single.html
    begin: ''''
    beginCaptures:
      '0': {name: punctuation.definition.string.begin.html}
    end: ''''
    endCaptures:
      '0': {name: punctuation.definition.string.end.html}
    patterns:
    - include: '#vue-interpolations'
    - include: '#entities'

  tag-generic-attribute:
    name: entity.other.attribute-name.html
    match: \b([a-zA-Z\-:]+)

  tag-id-attribute:
    name: meta.attribute-with-value.id.html
    begin: \b(id)\b\s*(=)
    end: (?<='|")
    captures:
      '1': {name: entity.other.attribute-name.id.html}
      '2': {name: punctuation.separator.key-value.html}
    patterns:
    - name: string.quoted.double.html
      contentName: meta.toc-list.id.html
      begin: '"'
      beginCaptures:
        '0': {name: punctuation.definition.string.begin.html}
      end: '"'
      endCaptures:
        '0': {name: punctuation.definition.string.end.html}
      patterns:
      - include: '#vue-interpolations'
      - include: '#entities'
    - name: string.quoted.single.html
      contentName: meta.toc-list.id.html
      begin: ''''
      beginCaptures:
        '0': {name: punctuation.definition.string.begin.html}
      end: ''''
      endCaptures:
        '0': {name: punctuation.definition.string.end.html}
      patterns:
      - include: '#vue-interpolations'
      - include: '#entities'

  tag-stuff:
    patterns:
    - include: '#vue-directives'
    - include: '#tag-id-attribute'
    - include: '#tag-generic-attribute'
    - include: '#string-double-quoted'
    - include: '#string-single-quoted'

foldingStartMarker: |-
  (?x)
  (<(?i:head|body|table|thead|tbody|tfoot|tr|div|select|fieldset|style|script|ul|ol|li|form|dl)\b.*?>
  |<!--(?!.*--\s*>)
  |^<!--\ \#tminclude\ (?>.*?-->)$
  |<\?(?:php)?.*\b(if|for(each)?|while)\b.+:
  |\{\{?(if|foreach|capture|literal|foreach|php|section|strip)
  |\{\s*($|\?>\s*$|//|/\*(.*\*/\s*$|(?!.*?\*/)))
  )

foldingStopMarker: |-
  (?x)
  (</(?i:head|body|table|thead|tbody|tfoot|tr|div|select|fieldset|style|script|ul|ol|li|form|dl)>
  |^(?!.*?<!--).*?--\s*>
  |^<!--\ end\ tminclude\ -->$
  |<\?(?:php)?.*\bend(if|for(each)?|while)\b
  |\{\{?/(if|foreach|capture|literal|foreach|php|section|strip)
  |^[^{]*\}
  )

keyEquivalent: ^~H