How to fetch local html file with vue.js?

Asked 12/9, 2017 at 15:14 Answered 7/2, 2019 at 0:1

Solved html iis vue.js visual-studio-code single-page-application

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';

 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.

Transcalent answered 12/9, 2017 at 15:14 Comment(0)

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})
  })
})

Reassure answered 12/9, 2017 at 16:31 Comment(1)

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! – Audiovisual 22/1, 2023 at 1:42

     <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

Hotchkiss answered 7/2, 2019 at 0:1 Comment(1)

doesn't work for me – Broomcorn 8/11, 2021 at 15:27

-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.

Marrano answered 12/9, 2017 at 15:40 Comment(4)

This answer make no sense at all. Did you read through the entire question? – Transcalent 12/9, 2017 at 15:45

Unless I missunderstood, you want to load in a html file and use it as vuejs template. – Marrano 12/9, 2017 at 15:47

Exactly, How does your answer get me there? not trying to be rude here but I don't understand at all how this helps? Edited my questionif that helps. – Transcalent 12/9, 2017 at 15:52

I updated the answer, I slightly missunderstood/missread it my bad. – Marrano 12/9, 2017 at 16:2

Recommended topics

Hot tags