<iframe src="htmlexterno.html"></iframe>

I noticed you’re trying to load local file iframe. Try replace URL of that file or read Static Assets Handling instead.

P/S Loading iframe is basic HTML stuff, so Vue is more than that for sure.

Whoever told you Vue is incompatible with <iframe>s didn’t know much about Vue. Here’s a simple example:

new Vue({
  el: '#app',
  data: () => ({
    source: 'https://en.wikipedia.org/wiki/Main_Page'
  })
})

#app, #app iframe {
  height: 100vh;
  width: 100vw;
  border: none;
  box-sizing: border-box;
}
body {
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <iframe :src="source"></iframe>
</div>

First of all, excuse my English, I’m using a translator.

I have a Vue.js project with a single-page path structure (SPA) typical of reactive frameworks with a main component where I create the nav and the footer and within the corresponding path call with <router-view></router-view>

What happens is that I need to introduce a page with external code inside the project that I cannot mix with Vue.js because it has too much css that is too incompatible and extensive to make it work together. So I wanted to see if you could enter within the template itself a call to a whole external html page, which is usually done with Iframe.

The first thing they provided was the Iframe itself with a simple label:

<template>
<iframe src="htmlexterno.html"></iframe>
</template>

But it didn’t work, and from what I’ve seen, it seems that Iframe is not compatible with Vue.js

Then searching the internet I found this code:

<template>
<div v-html="varhtml"></div>
<template>
<script>
export default {
data: {
    varhtml: '<p>Loading...</p>'
},

ready() {
    this.$http.get('htmlexterno.html').then(response => {
        this.varhtml = response.data;
    });
}
}
</script>

But it doesn’t work for me either.

Then thanks to the help of an answer in this question I got it to load internet urls, but htmlexterno.html is a local project and doesn’t work for me.

The last one I did is this but it only works if I put an internet url (not local):

<template>
    <iframe :src="ruta"></iframe>
</template>
<script>
export default {
    data: () => ({
        ruta: 'htmlexterno.html'
    })
}
</script>

I’d appreciate it if someone could help me.