10

I am following this example

I am trying to load a html file with vue.js and add into my template.

my attempt:

HTTML:

<html lang="en">

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="/Static/content/css/foundation.css">
    <link rel="stylesheet" type="text/css" href="/Static/content/css/spaceGame.css">

</head>

<body>
    <div id="app">
        <div class="grid-container">
            <div class="grid-x grid-padding-x">
                <div class="large-12 cell">
                    <h1>Welcome to Foundation</h1>
                </div>
            </div>
        </div>

        <div class="grid-x grid-padding-x">
            <div class="large-4 columns"></div>
            <div class="large-8 columns">
                <component :is="currentView"></component>
            </div>
        </div>

    </div>
    <!-- Footer -->
    <script src="https://unpkg.com/vue"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="/Static/scripts/foundation.js"></script>
    <script type="text/javascript" src="/Static/scripts/what-input.js"></script>

    <script type="text/javascript" src="/Static/scripts/space.js"></script>
</body>

</html>

script:

$(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'
        }
    })

});

Errors:

above I get the following:

  • Component template requires a root element, rather than just text.

changing var myData = '../../Views/login.html';

to

 var myData = '<div>../../Views/login.html</div>';

gets rid of that error but...how do I load the actual html file?

I am new to single page applications and to vue.js, been at this for some time now and can't figure it out.

EDIT:

The html file that I am trying to load:

<div>
    <template id="manage-template">

    <form>
        <div class="sign-in-form">
            <h4 class="text-center">Sign In</h4>
            <label for="sign-in-form-username">Username</label>
            <input type="text" class="sign-in-form-username" id="sign-in-form-username">
            <label for="sign-in-form-password">Password</label>
            <input type="text" class="sign-in-form-password" id="sign-in-form-password">
            <button type="submit" class="sign-in-form-button">Sign In</button>
        </div>
    </form>
</template>
</div>

EDIT 2:

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.

ThunD3eR
  • 3,216
  • 5
  • 50
  • 94

3 Answers3

9

Vue provides a means of asynchronously creating a component. You can use that in this case to retrieve your template from the server.

In this example code, I'm going to use axios to retrieve the template, but you can use whatever library you prefer.

Vue.component('manage-posts', function(resolve, reject){
  axios.get("../../Views/login.html").then(response => {
    resolve({template: response.data})
  })
})
tony19
  • 125,647
  • 18
  • 229
  • 307
Bert
  • 80,741
  • 17
  • 199
  • 164
  • This a very good approach! Thank you, but, what do you think if I want import like 200 templates? Do you think it could be slow the performance of my webapp? Thank you! – Fernando Torres Jan 22 '23 at 01:42
6
     <div v-html="compiledHtml"></div>

data: function() {
    return {
      fileName: "terms.html",
      input: ""

    };
  },
     created() {
        this.fileName = this.$route.params.fileName;
        this.loadFile()
    }
    computed: {
        compiledHtml: function() {
          return this.input;
        }
      },
    methods: {

        loadFile() {
          axios({
            method: "get",
            url: "../../static/" + this.fileName
          })
            .then(result => {
              this.input = result.data;
            })
            .catch(error => {
              console.error("error getting file");
            });
        }
      },

This code works. The trick is in the computed variable

lguerra10
  • 249
  • 3
  • 5
-3

When you point the template to '../../Views/login.html' the template is litterly a string with the value of ../../Views/login.html, so you need a way to get the file's data inside a javascript variable.
You can do this with RequireJS or fill the template using php (using ex. file_get_contents)

A quick example of getting the data would be:

var template_data = "<?php echo file_get_contents('../../Views/login.html'); ?>";
console.log(template_data);

test the example and check your browser's console, you could also load it in via Ajax.

AngelsDustz
  • 64
  • 1
  • 7