Get your own Vue server
  <p>Click the button to fetch data with an HTTP request.</p>
  <p>Each click generates an object with a random user from <a href="" target="_blank"></a>.</p>
  <p>The robot avatars are lovingly delivered by <a href="" target="_blank">RoboHash</a>.</p>
  <button @click="fetchData">Fetch data</button>
  <div v-if="data" id="dataDiv">
    <img :src="data.avatar" alt="avatar">
    <pre>{{ data.first_name + " " + data.last_name }}</pre>
    <p>"{{ data.employment.title }}"</p>

  export default {
    data() {
      return {
        data: null,
    methods: {
      async fetchData() {      
        const response = await fetch(""); = await response.json();

#dataDiv {
  width: 240px;
  background-color: aquamarine;
  border: solid black 1px;
  margin-top: 10px;
  padding: 10px;
#dataDiv > img {
  width: 100%;
pre {
  font-size: larger;
  font-weight: bold;
import { createApp } from 'vue'

import App from './App.vue'

const app = createApp(App)