How to render HTML file in Vue JS which is sent by the server?

Question

I am very new to Vue JS. Currently, I'm finding a way to render an HTML page that is sent by the server. Lest's assume I have a node router "health" that sends an HTML file as follows.

res.sendFile('test.html', { root: path.dirname(require.main.filename) + '/public/' });

In that case, can I try to access that file and render it this way by Vue JS?

<div id="app">
<div v-html="reactPage"></div>
</div>
<script>
let sessionId = "";
(function() {
    const app = new Vue({
        el: '#app',
        data: {
            reactPage: undefined
        },
        created() {
            fetch('launch/health')
                .then(response => {
                    this.reactPage = response;
                })
        }
    })
})();

This code is not working as I expected.

Dan · Accepted Answer · 2020-04-17 10:25:45Z

2

Yes, the only thing wrong here is the fetch syntax. Try this:

fetch('launch/health')
.then(response => {
  return response.text();
})
.then(data => {
  this.reactPage = data;
})

You could consider using axios for easier http requests.

answered Apr 17, 2020 at 10:25

Dan

63.5k18 gold badges113 silver badges122 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Thathsara Udugampala Over a year ago

Thanks. It worked. Missing part is text(). You should use then() instead of than() since I'm using fetch API. But I have another question. I loaded a static HTML page successfully. But once I try to load an HTML page which initializes a react application I can not see anything. Basically I tried to load the react app inside the above Vue JS app. Do you think these two libraries (Vue and React) conflicting each other or something like that happening??. I used jquery html() before replacing the dom with react app. Then it worked.

Dan Over a year ago

Glad it's working. I did use .then(), so I'm not sure what you're referring to. The syntax in the answer showed you the proper way to use fetch, and now the problem is fixed. To your other question, it won't work. You can't expect to load a compiled React application inside v-html unfortunately.

Thathsara Udugampala Over a year ago

Is there any way to compile and bind the react page using Vue JS ??

Dan Over a year ago

No, Vue can't compile React apps. Why do you want to do that?

Thathsara Udugampala Over a year ago

Since I'm using parcel as the build tool for the react app I think there should be a way to achieve this.

|

Collectives™ on Stack Overflow

How to render HTML file in Vue JS which is sent by the server?

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related