title: Load an entire HTML project into VueJS component with Axios
body: <p>I'm dealing with a 3D Vista tour web repository that I need to render in my Rails / Vue project.
  <a href="https://i.stack.imgur.com/Mggh0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Mggh0.png" alt="Files received from 3D vista web export " /></a>
  Here are all the files exported from 3D vista. The only way to render the Virtual Tour is to upload those files on a server.</p>
  <p>What I'm trying to do here is to render that project inside my Vue template. (This is a Rails /
  VueJS App project)</p>
  <p>Here is what I'have in my Vue file :</p>
  <pre><code> &lt;template&gt;
      &lt;div id=&quot;vr-frame&quot; v-html=&quot;compiledHtml&quot;&gt; &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import axios from 'axios';
  
  export default {
      name: 'vr',
      data() {
          return {
          fileName: &quot;index.htm&quot;,
          input: &quot;&quot;
          };
      },
      computed: {
          compiledHtml() {
          return this.input;
          }
      },
      methods: {
          loadFile() {
          axios({
              method: &quot;get&quot;,
              url: &quot;../../assets/tours/v1/&quot; + this.fileName
          })
              .then(result =&gt; {
              this.input = result.data;
              })
              .catch(error =&gt; {
              console.error(&quot;error getting file&quot;);
              });
          }
      },
  }
  
  &lt;/script&gt;
  </code></pre>
  
  
  
  <p>I still don't know is that is actually possible and so far I don't it doesn't seem to work either.</p>
  <p>What is the proper way to load and render an external web project into a VueJS template and is API appropriate for this case?</p>
  <p>Thanks</p>