title: How to fetch local html file with vue.js?
body: <p>I am following <a href="https://jsfiddle.net/coligo/mfxb9aeh/" rel="noreferrer">this example</a></p>
  
  <p>I am trying to load a html file with vue.js and add into my template.</p>
  
  <p>my attempt:</p>
  
  <p>HTTML:</p>
  
  <pre><code>&lt;html lang="en"&gt;
  
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;link rel="stylesheet" type="text/css" href="/Static/content/css/foundation.css"&gt;
      &lt;link rel="stylesheet" type="text/css" href="/Static/content/css/spaceGame.css"&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div id="app"&gt;
          &lt;div class="grid-container"&gt;
              &lt;div class="grid-x grid-padding-x"&gt;
                  &lt;div class="large-12 cell"&gt;
                      &lt;h1&gt;Welcome to Foundation&lt;/h1&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="grid-x grid-padding-x"&gt;
              &lt;div class="large-4 columns"&gt;&lt;/div&gt;
              &lt;div class="large-8 columns"&gt;
                  &lt;component :is="currentView"&gt;&lt;/component&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
      &lt;!-- Footer --&gt;
      &lt;script src="https://unpkg.com/vue"&gt;&lt;/script&gt;
      &lt;script src="https://code.jquery.com/jquery-3.2.1.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="/Static/scripts/foundation.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="/Static/scripts/what-input.js"&gt;&lt;/script&gt;
  
      &lt;script type="text/javascript" src="/Static/scripts/space.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>script:</p>
  
  <pre><code>$(function() {
      $(document).foundation()
  
      var myData = '../../Views/login.html';
      Vue.component('manage-posts', {
          template: myData,
      })
  
      Vue.component('create-post', {
          template: '#create-template'
      })
  
      new Vue({
          el: '#app',
          data: {
              currentView: 'manage-posts'
          }
      })
  
  });
  </code></pre>
  
  <p>Errors:</p>
  
  <p>above I get the following: </p>
  
  <blockquote>
    <ul>
    <li>Component template requires a root element, rather than just text.</li>
    </ul>
  </blockquote>
  
  <p>changing  <code>var myData = '../../Views/login.html';</code></p>
  
  <p>to</p>
  
  <pre><code> var myData = '&lt;div&gt;../../Views/login.html&lt;/div&gt;';
  </code></pre>
  
  <p>gets rid of that error but...how do I load the actual html file?</p>
  
  <p>I am new to single page applications and to vue.js, been at this for some time now and can't figure it out.</p>
  
  <p>EDIT: </p>
  
  <p>The html file that I am trying to load:</p>
  
  <pre><code>&lt;div&gt;
      &lt;template id="manage-template"&gt;
  
      &lt;form&gt;
          &lt;div class="sign-in-form"&gt;
              &lt;h4 class="text-center"&gt;Sign In&lt;/h4&gt;
              &lt;label for="sign-in-form-username"&gt;Username&lt;/label&gt;
              &lt;input type="text" class="sign-in-form-username" id="sign-in-form-username"&gt;
              &lt;label for="sign-in-form-password"&gt;Password&lt;/label&gt;
              &lt;input type="text" class="sign-in-form-password" id="sign-in-form-password"&gt;
              &lt;button type="submit" class="sign-in-form-button"&gt;Sign In&lt;/button&gt;
          &lt;/div&gt;
      &lt;/form&gt;
  &lt;/template&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>EDIT 2:</p>
  
  <p>If this has any impact on answers i just want to point out: 
  using VS-code, site is running in IIS, no node.js is used here. </p>