How to get html content of component in vue js

The template will be compiled to a render function so your code won't work. And basically you can't get the original html template.

I'm not sure what you are trying to do. If you want to get the source template content, the easiest way to achieve this is to save the template in a variable so that you can ref to it in the future.

Note that .vue doesn't support named exports so you need to put this in another .js file:

export const templateOfAdvanceTemplatePage = `
  <div class="content edit-page management">
    <md-card class="page-card">
     ...
    </md-card>
  </div>
`

and in your AdvanceTemplatePage.vue

import templateOfAdvanceTemplatePage from 'path/to/templateOfAdvanceTemplatePage.js'

export default {
  template: templateOfAdvanceTemplatePage,
  ...
}

Now you can simply import templateOfAdvanceTemplatePage everywhere you want since it's just a variable.

If you want the compiled html instead of the source template, I found out a tricky way to achieve. Simply render the component and use innerHTML to get the html:

in another component, you render but hide it, also give it a ref:

<template>
  ...
    <advance-template-page v-show="false" ref="foo"></advance-template-page>
  ...
</template>

now you can get the html content in your methods:

onPrint() {
    const template = this.$refs.foo.$el.innerHTML
}

You can just add <slot></slot> (documentation) to your component