How to use tidy to indent vueJS HTML5 without breaking/removing part of it

Question

Running tidy on this VueJS code completely break it:

The source VueJS HTML code:

$ cat sample_vue.html
...
      <tbody>
        <tr v-for="task in tasks">
          <td><strong>{{task.title}}</strong></td>
          <td>{{task.description}}</td>
          <td>
            <button class='btn btn-outline-primary btn-sm m-1 mb-2'
            @click="delTasks_button(task);"><i class="fa fa-remove"></i></button>
            <router-link :to="{ name: 'edit', params: {id: task.id}}" class="btn
            btn-outline-primary btn-sm m-1 mb-2"><i class="fa
            fa-pencil"></i></router-link>
          </td>
        </tr>
      </tbody>

I run tidy on it:

$ tidy -i --custom-tags blocklevel --doctype omit   \
       --show-body-only yes --indent-attributes yes \
       --show-warnings no -q sample_vue.html

We get this:

      <table>
        <tbody>
          <tr v-for="task in tasks">
            <td><strong>{{task.title}}</strong></td>
            <td>{{task.description}}</td>
            <td>
              <router-link class=
              "btn btn-outline-primary btn-sm m-1 mb-2"></router-link>
            </td>
          </tr>
        </tbody>
      </table>

As you can see the <button is removed and the :to= and the inner <i > also ;(

If I avoid to use the shorten :to= syntax for v-bind:to= the v-bind:to= is preserved but the global result style broken:

So from this (with the full v-bind:to= syntax):

    <table class='table table-striped'>
      <thead>
        <tr class="table-dark">
          <td scope='col'>title</td>
          <td scope='col'>description</td>
          <td scope='col'>action</td>
        </tr>
      </thead>
      <tbody>
        <tr v-for="task in tasks">
          <td><strong>{{task.title}}</strong></td>
          <td>{{task.description}}</td>
          <td>
            <button class='btn btn-outline-primary btn-sm m-1 mb-2'
            @click="delTasks_button(task);"><i class="fa fa-remove"></i></button>
            <router-link b-bind:to="{ name: 'edit', params: {id: task.id}}" class="btn
            btn-outline-primary btn-sm m-1 mb-2"><i class="fa
            fa-pencil"></i></router-link>
          </td>
        </tr>
      </tbody>
    </table>

We still get a broken output <button removed and inner <i> removed:

<table class='table table-striped'>
  <thead>
    <tr class="table-dark">
      <td scope='col'>title</td>
      <td scope='col'>description</td>
      <td scope='col'>action</td>
    </tr>
  </thead>
  <tbody>
    <tr v-for="task in tasks">
      <td><strong>{{task.title}}</strong></td>
      <td>{{task.description}}</td>
      <td>
        <router-link b-bind:to=
        "{ name: 'edit', params: {id: task.id}}"
                     class=
                     "btn btn-outline-primary btn-sm m-1 mb-2">
                     </router-link>
      </td>
    </tr>
  </tbody>
</table>

Answer 1

I don't have a solution for @click neither for :to= but if we replace them by the no

shortcut VueJS syntax v-on:click= and v-bind:to= then with this tidy options:

$ tidy -i --custom-tags blocklevel --doctype omit   \
       --show-body-only yes --indent-attributes yes \
       --show-warnings no 
       --drop-empty-elements no
       -q sample_vue.html

we get from this input:

$ cat sample_vue.html
    <table class='table table-striped'>
      <thead>
        <tr class="table-dark">
          <td scope='col'>title</td>
          <td scope='col'>description</td>
          <td scope='col'>action</td>
        </tr>
      </thead>
      <tbody>
        <tr v-for="task in tasks">
          <td><strong>{{task.title}}</strong></td>
          <td>{{task.description}}</td>
          <td>
            <button class='btn btn-outline-primary btn-sm m-1 mb-2'
            v-on:click="delTasks_button(task);"><i class="fa fa-remove"></i></button>
            <router-link b-bind:to="{ name: 'edit', params: {id: task.id}}" class="btn
            btn-outline-primary btn-sm m-1 mb-2"><i class="fa
            fa-pencil"></i></router-link>
          </td>
        </tr>
      </tbody>
    </table>

We get this result (hugly indentation but not parts missing):

<table class='table table-striped'>
  <thead>
    <tr class="table-dark">
      <td scope='col'>title</td>
      <td scope='col'>description</td>
      <td scope='col'>action</td>
    </tr>
  </thead>
  <tbody>
    <tr v-for="task in tasks">
      <td><strong>{{task.title}}</strong></td>
      <td>{{task.description}}</td>
      <td>
        <button class='btn btn-outline-primary btn-sm m-1 mb-2'
            v-on:click="delTasks_button(task);"><i class=
            "fa fa-remove"></i></button>
        <router-link b-bind:to=
        "{ name: 'edit', params: {id: task.id}}"
                     class=
                     "btn btn-outline-primary btn-sm m-1 mb-2">
                     <i class="fa fa-pencil"></i></router-link>
      </td>
    </tr>
  </tbody>
</table>