#
# HTML
#
Given vue (An unindented html template):
  <template>
  <div>
  Hello
  </div>
  </template>

Do (Indent the whole buffer):
  gg=G

Expect (The html template got indented):
  <template>
    <div>
      Hello
    </div>
  </template>


Given vue (Template tag inside a template):
  <template>
    <div>
      <template v-if="loading">
        Loading...
      </template>
    </div>
  </template>

Do (Indent the whole buffer):
  gg=G

Expect (It didn't get unindented):
  <template>
    <div>
      <template v-if="loading">
        Loading...
      </template>
    </div>
  </template>

#
# JavaScript
#
Given vue (An unindented JavaScript region):
  <script>
  export default {
  methods: {
  foo() {
  //
  }
  }
  }
  </script>

Do (Indent the whole buffer):
  gg=G

Expect vue (The JavaScript region got indented):
  <script>
  export default {
    methods: {
      foo() {
        //
      }
    }
  }
  </script>

#
# CSS
#
Given vue (An unindented css region):
  <style>
  body {
  background: tomato;
  }
  </style>

Do (Indent the whole buffer):
  gg=G

Expect vue (The css region got indented):
  <style>
  body {
    background: tomato;
  }
  </style>

#
# Pug
#
Given vue (Empty Pug region):
  <template lang="pug">
  </template>

Do (Insert list items):
  o
  ul\<CR>
  li Item A\<CR>
  li Item B

Expect:
  <template lang="pug">
  ul
    li Item A
    li Item B
  </template>

#
# Stylus
#
Given vue (Empty Stylus region):
  <style lang="stylus">
  </style>

Do (Insert some styles):
  o
  body\<CR>
  font-size: 14px\<CR>
  \<CR>\<C-d>
  h1\<CR>
  font-size: 30px\<CR>
  display: block

Expect:
  <style lang="stylus">
  body
    font-size: 14px

  h1
    font-size: 30px
    display: block
  </style>