How to define vue template in pug?

Question

How to have Vue.js recognize Pug in a String template? Example:

Vue.component('my-component', {
  template: `
    div
      div`})

I saw how this can be done in standalone templates, as in:

<template lang='pug'>
  div
    div
</template>

But I would like to be able to use pug in String templates.

Answer 1

We use pug in our vue templates using x-template, here's a shell component:

script(type="text/x-template" id="admin-tags")
  div
    h1 Admin Tags
script.
  var AdminTags = Vue.component('admin-tags', {
    template: "#admin-tags",
    props: ["options"],
    data: function(){
      return {
      }
    }
  });

Then we just include the files with the components in the parent template. It works really well.

UPDATE 04/2019: I have recently started a new project using vue-cli and vue-cli-plugin-pug has been working very well. It's as easy as this:

<template lang='pug'>
  div
    h1 Home
    ul
      li A
      li B
      li C
</template>

<script>

export default {
  name: 'Home',
  data () {
    return {
    }
  }
}
</script>