<template>
  <div>
    <div v-if="loading">Loading..</div>
    <div v-else>{{ data }}</div>
  </div>
</template>

<script>
import axios from 'axios'
import { setupCache } from 'axios-cache-interceptor/dev'
const axiosInstance = axios.create()

const axiosWithCache = setupCache(axiosInstance, {
  debug: console.log,
})

export default {
  layout: 'navbar',

  data() {
    return {
      data: null,
      loading: false,
    }
  },

  mounted() {
    this.fetchProjects()
  },
  methods: {
    async fetchProjects() {
      this.loading = true

      this.data = await axiosWithCache.get(
        '/api/project/all?limit=12&start_at=' + 1 + '&search_key='
      )
      this.loading = false
    },
  },
}
</script>