In this short snippet, you will learn how to fetch HTML from the backend server and display them right away in the Vue Js component. The implementation is very simple and it's as follows.
<template>
<html-fetcher url="/blog/static-content/some-post.html"/>
</template>
<script>
import axios from 'axios'
Vue.component('html-fetcher', {
template: '<div>Loading…</div>',
props: ['url'],
mounted () {
axios.get(this.url).then(({ data }) => this.$el.outerHTML = data)
}
})
</script>Do note that you will need to have Axios HTTP library installed to perform the ajax. If you have not done so, do run the command below.
npm install axios
If you are using Yarn then below is the command.
yarn add axios
Leave a reply