template or partial inheritance with Vue.js-CodePudding

I'm making a client side website with only HTML CSS JS for my portfolio, I've been copy-pasting my header and footer in almost all the differents urls.

I would like to know if there is a way to avoid that using like a partial or template (as is used in Rails or Flask) but with Vue.js.

I mean, I want my HTML files look something like this:

{% extends "base.html" %}

{% block content %}
<!--My HTML code for this file.html-->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et elementum ex. Etiam fermentum lacus non convallis ultrices.</p>
{% endblock %}

CodePudding user response：

I solved using a Vue.js components https://vuejs.org/guide/essentials/component-basics.html

//Header.js
export default {
  data() {
    return {}
  },
  template: `
    <header>
    <p>This is a header</p>
    </header>`
}

<!-- Any .html file -->
<body>
  <script src="https://unpkg.com/vue@3"></script>
  <script type="module">
    import Header from '../static/vue/Header.js'
    const { createApp } = Vue
    createApp(Header).mount('#header')
  </script>

  <div id="header"></div>

  ...

</body>