Vue multi-page mode - reusable header and footer

Hi all,

Currently I have a multiple page Vue app, I was wondering does anyone know how I can include the header and footer for each page? as currently am pasting the same markup in each html file.

Any help appreciated.
Thanks

Example code below:

//vue.config.js

module.exports = {
	pages: {
		index: {
	      entry: 'src/vue/main.js',
	      template: 'public/index.html',
	      filename: 'index.html',
		},
		page1: {
	      entry: 'src/vue/main.js',
	      template: 'public/page1.html',
	      filename: 'page1.html',
		},
		page2: {
	      entry: 'src/vue/main.js',
	      template: 'public/page2.html',
	      filename: 'page2.html',
		}
	}
}

//public/index.html
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Index</title>
  <meta name="description">
</head>
<body>
	<nav>Nav Content<nav>
	<div data-component="IndexVueComponenet"></div>
  <footer>Footer content</footer>
</body>
</html>

//public/page1.html
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Page1</title>
  <meta name="description">
</head>
<body>
	<nav>Nav Content<nav>
	<div data-component="Page1VueComponenet"></div>
  <footer>Footer content</footer>
</body>
</html>

//public/page2.html
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Page2</title>
  <meta name="description">
</head>
<body>
	<nav>Nav Content<nav>
	<div data-component="Page2VueComponenet"></div>
  <footer>Footer content</footer>
</body>
</html>

Managed to resolve this by using the html-loader

For anyone else who needs this, here is how to resolve it:

npm install --save-dev html-loader

Than you can add partials using the following syntax
<%= require(‘html-loader!./partials/footer.html’) %>

example code:

<head>
  <meta charset="utf-8">
  <title>Index</title>
  <meta name="description">
</head>
<body>
	<%= require('html-loader!./partials/navigation.html') %>
	<div data-component="IndexVueComponenet"></div>
  <%= require('html-loader!./partials/footer.html') %>
</body>
</html>