title: How to print a part of a vue component without losing the style
body: <p>I want to print some content from a vue component. For example from the following snippet, I would like to print the <code>v-card-text</code> element which also has an id of <code>#print</code>:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>new Vue({
    el: '#app',
    data() {
      return {
        dialog: false
      }
    },
    methods: {
      print() {
        var prtContent = document.getElementById("print");
        var WinPrint = window.open('', '', 'left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0');
        WinPrint.document.write(prtContent.innerHTML);
        WinPrint.document.close();
        WinPrint.focus();
        WinPrint.print();
        WinPrint.close();
      }
    }
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.2.0/vuetify.min.css" /&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div id="app"&gt;
      &lt;v-app id="inspire"&gt;
        &lt;v-layout row justify-center&gt;
          &lt;v-dialog v-model="dialog" persistent max-width="290"&gt;
            &lt;v-btn slot="activator" color="primary" dark&gt;Open Dialog&lt;/v-btn&gt;
            &lt;v-card&gt;
              &lt;v-card-title class="headline"&gt;Print This:&lt;/v-card-title&gt;
              &lt;v-card-text id="print"&gt;Lorem ipsum dolor sit amet.&lt;/v-card-text&gt;
              &lt;v-card-actions&gt;
                &lt;v-spacer&gt;&lt;/v-spacer&gt;
                &lt;v-btn color="green darken-1" flat @click.native="print"&gt;Print&lt;/v-btn&gt;
            &lt;/v-card&gt;
          &lt;/v-dialog&gt;
        &lt;/v-layout&gt;
      &lt;/v-app&gt;
    &lt;/div&gt;
    &lt;script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.2.0/vuetify.min.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>However,when I get prompted for the print, all the styles associated with it goes away. How can I print a vue component in such a way so that the components won't lose the associated styles?
  I recommend to copy the snippet to your local machine for the best effect.</p>