mattroyer/App.vue

## App.vue
<template>
  <div>
    <p>This is the start of the App component.</p>

    <Images />
  </div>
</template>

<script>
import Images from './components/Images.vue'

export default {
  name: 'App',
  components: {
    Images
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

## Images.vue
<template>
  <!-- Vue requires one root element in each template, I usually just use a <div> unless I have to use something else -->
  <div>
    <!-- v-for is a Vue directive to loop over items in your `data` /> -->
    <img v-for="image in images" :src="image.download_url" width="200" height="200" />
  </div>
</template>

<script>
// I installed axios (`npm install axios`) to get around the CORS issues
// It's much nicer to work with than the standard `fetch`
// is anyway.
//
import axios from 'axios'

export default {
  data() {
    return {
      images: []
    }
  },

  mounted() {
    // Do something when the component mounts
    //
    // For instance, run your `fetchImages` method
    //
    this.fetchImages()
  },

  // These are for any function you need to run on actions (like clicking and whatnot)
  //
  methods: {

    // Name of the function to put somewhere
    //
    fetchImages() {

      // This runs a GET request to the picsum.photos api
      // which returns json
      //
      axios.get('https://picsum.photos/v2/list')
      .then(({data}) => {
        // I used destructuring to pluck `data` out of the
        // object. It's the only relevant piece for our needs
        // but you could change this to something else like
        // name it response above without the curly braces
        // and then in the console.log(), see what the response
        // holds
        //
        console.log(data)

        // Since we plucked out data, which is an array of images
        // we set our images attribute from Vue to the array we receive
        // from the server
        //
        this.images = data
      })
    }
  }
}
</script>

## index.html
<!-- this is from the dist/ directory -->

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="/favicon.ico">
    <title>zach</title>

  <!-- this is where the bundled app is injected -->
  <script defer src="/js/chunk-vendors.js"></script><script defer src="/js/app.js"></script></head>
  <body>
    <noscript>
      <strong>We're sorry but zach doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

## main.js
import { createApp } from 'vue'
import App from './App.vue'

// This mounts to the div with `id="app"` inside of `index.html` in the public folder.
createApp(App).mount('#app')
	<template>
	<div>
	<p>This is the start of the App component.</p>

	<Images />
	</div>
	</template>

	<script>
	import Images from './components/Images.vue'

	export default {
	name: 'App',
	components: {
	Images
	}
	}
	</script>

	<style>
	#app {
	font-family: Avenir, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-align: center;
	color: #2c3e50;
	margin-top: 60px;
	}
	</style>
	<template>
	<!-- Vue requires one root element in each template, I usually just use a <div> unless I have to use something else -->
	<div>
	<!-- v-for is a Vue directive to loop over items in your `data` /> -->
	<img v-for="image in images" :src="image.download_url" width="200" height="200" />
	</div>
	</template>

	<script>
	// I installed axios (`npm install axios`) to get around the CORS issues
	// It's much nicer to work with than the standard `fetch`
	// is anyway.
	//
	import axios from 'axios'

	export default {
	data() {
	return {
	images: []
	}
	},

	mounted() {
	// Do something when the component mounts
	//
	// For instance, run your `fetchImages` method
	//
	this.fetchImages()
	},

	// These are for any function you need to run on actions (like clicking and whatnot)
	//
	methods: {

	// Name of the function to put somewhere
	//
	fetchImages() {

	// This runs a GET request to the picsum.photos api
	// which returns json
	//
	axios.get('https://picsum.photos/v2/list')
	.then(({data}) => {
	// I used destructuring to pluck `data` out of the
	// object. It's the only relevant piece for our needs
	// but you could change this to something else like
	// name it response above without the curly braces
	// and then in the console.log(), see what the response
	// holds
	//
	console.log(data)

	// Since we plucked out data, which is an array of images
	// we set our images attribute from Vue to the array we receive
	// from the server
	//
	this.images = data
	})
	}
	}
	}
	</script>
	<!-- this is from the dist/ directory -->

	<!DOCTYPE html>
	<html lang="">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<link rel="icon" href="/favicon.ico">
	<title>zach</title>

	<!-- this is where the bundled app is injected -->
	<script defer src="/js/chunk-vendors.js"></script><script defer src="/js/app.js"></script></head>
	<body>
	<noscript>
	<strong>We're sorry but zach doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
	</noscript>
	<div id="app"></div>
	<!-- built files will be auto injected -->
	</body>
	</html>
	import { createApp } from 'vue'
	import App from './App.vue'

	// This mounts to the div with `id="app"` inside of `index.html` in the public folder.
	createApp(App).mount('#app')