title: Header and footer component in Vue.js
body: <p>I am learning Vue.js, I am not using cli for Vue.js installation, I just downloaded Vue.js file and trying to learn it.</p>
  <p>My issue is to externalize components like header.vue and footer.vue and add them to main component.</p>
  <p>I used <code>Vue.component('MyHeader', require('./components/Header.vue'));</code> to load component but I was getting error like <code>&quot;Uncaught ReferenceError: require is not defined&quot;</code>.</p>
  <p>To resolve this error I downloaded require.js file from <a href="http://requirejs.org/docs/download.html#requirejs" rel="nofollow noreferrer">here</a> but I am still unable to load component files.</p>
  <p><strong>Folder Structure</strong></p>
  <p><a href="https://i.stack.imgur.com/Bip1Z.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Bip1Z.png" alt="enter image description here" /></a></p>
  <p><strong>index.html</strong></p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;this is example of header and footer&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div id='root'&gt;
     &lt;testcomponent&gt;&lt;/testcomponent&gt;
     &lt;MyHeader&gt;&lt;/MyHeader&gt;
     &lt;div&gt;I am Content&lt;/div&gt;
     &lt;MyFooter&gt;&lt;/MyFooter&gt;
  &lt;/div&gt;
  
  
  &lt;!-- we need this two files for vue js --&gt;
  &lt;script type=&quot;text/javascript&quot; src=&quot;vue.js&quot;&gt;&lt;/script&gt;
  &lt;script type=&quot;text/javascript&quot; src=&quot;require.js&quot;&gt;&lt;/script&gt;
  &lt;!-- End of we need this two files for vue js --&gt;
  &lt;script type=&quot;text/javascript&quot; src=&quot;indexController.js&quot;&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p><strong>indexController.js</strong></p>
  <pre><code>//rout file for vue js
  
  Vue.component(&quot;testcomponent&quot;,{
      template:'&lt;p&gt;I am Test Component&lt;/p&gt;'
  });
  
  Vue.component('MyHeader', require('./components/Header.vue'));
  Vue.component('MyFooter', require('./components/Footer.vue'));
  
  //import MyHeader from './components/Header.vue'
  //import MyFooter from './components/Footer.vue'
  
  var app = new Vue({
      el: &quot;#root&quot;,
      components: {
          MyHeader,
          MyFooter
      },
      data: {
          
      },
      methods:{
  
      }
  
  });
  </code></pre>
  <p><strong>Header.vue</strong></p>
  <pre><code>&lt;template&gt;
      &lt;h1&gt;I am Header&lt;/h1&gt;
  &lt;/template&gt;
  </code></pre>
  <p><strong>Footer.vue</strong></p>
  <pre><code>&lt;template&gt;
      &lt;h1&gt;I am Footer&lt;/h1&gt;
  &lt;/template&gt;
  </code></pre>