<template>
  <div v-html="externalHtml"></div>
</template>

<script>
export default {
  data() {
    return {
      externalHtml: ''
    }
  },
  async mounted() {
    const response = await fetch('path/to/external.html');
    this.externalHtml = await response.text();
  }
}
</script>

<template>
  <iframe src="path/to/external.html" frameborder="0"></iframe>
</template>

module: {
  rules: [
    {
      test: /\.html$/,
      loader: 'html-loader'
    }
  ]
}

<template>
  <div v-html="htmlContent"></div>
</template>

<script>
import htmlContent from './external.html';

export default {
  data() {
    return {
      htmlContent
    }
  }
}
</script>

import React, { useState, useEffect } from 'react';

function App() {
  const [htmlContent, setHtmlContent] = useState('');

  useEffect(() => {
    fetch('path/to/external.html')
      .then(response => response.text())
      .then(text => setHtmlContent(text));
  }, []);

  return <div dangerouslySetInnerHTML={{ __html: htmlContent }} />;
}

export default App;

function App() {
  return (
    <iframe src="path/to/external.html" title="External Content" />
  );
}

module: {
  rules: [
    {
      test: /\.html$/,
      use: ['html-loader']
    }
  ]
}

import React from 'react';
import htmlContent from './external.html';

function App() {
  return <div dangerouslySetInnerHTML={{ __html: htmlContent }} />;
}

export default App;