Posts Learn Components Snippets Categories Tags About
/

Vue Js Fetch and Display HTML from Server Using Ajax

Learn how to fetch some HTML from the server and display them right to your Vue Js application the easy way

Created on Sep 11, 2021

11 views

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

Snippets by

PostSrc poster

PostSrc

Full stack developer mainly focusing on the front end side of the web. The main author of PostSrc and loves writing tutorial and guides online.

new

PostSrc Code Components

Collection of Tailwind CSS components for everyone to use. Browse all of the components that's right for your project.

View Components

Other Code Snippets

More