How do I convert Vue JS templates to pure HTML

Question

Good day, I have been asked to convert an entire VueJs template into pure HTML to use it in Angular.

I have access to all of Vue's files, in fact the entire code base, but is there a 'quick' way to convert these templates to regular HTML?

Answer 1

There's no tool for it. Here are the basics:

• :attribute="x" or v-bind:attribute="x" =>
  • [attribute]="x" for custom attributes
  • [attr.attribute]="x" for native HTML attributes
  • [(attribute)]="x" for two-way binding (inputs)
• @event="x" or v-on:event="x" => (event)="x"
• v-for="(item, key) in items" :key="key" => *ngFor="let item of items;let key=index;"
• v-if="x" => *ngIf="x"
• v-else reference moves on the *ngIf element: *ngIf="x; else other" and somewhere in your component you define <ng-template #other>...other content here</ng-template>

If you run into edge cases, ask, and I'll update the answer.
You might find this useful.