core/packages/vue/examples/composition/commits.html

<script src="../../dist/vue.global.js"></script>

<div id="demo">
  <h1>Latest Vue.js Commits</h1>
  <template v-for="branch in branches">
    <input
      type="radio"
      :id="branch"
      :value="branch"
      name="branch"
      v-model="currentBranch"
    />
    <label :for="branch">{{ branch }}</label>
  </template>
  <p>vuejs/core@{{ currentBranch }}</p>
  <ul>
    <li v-for="{ html_url, sha, author, commit } in commits">
      <a :href="html_url" target="_blank" class="commit"
        >{{ sha.slice(0, 7) }}</a
      >
      - <span class="message">{{ truncate(commit.message) }}</span><br />
      by
      <span class="author"
        ><a :href="author.html_url" target="_blank"
          >{{ commit.author.name }}</a
        ></span
      >
      at <span class="date">{{ formatDate(commit.author.date) }}</span>
    </li>
  </ul>
</div>

<script>
  const { createApp, ref, watchEffect } = Vue
  const API_URL = `https://api.github.com/repos/vuejs/core/commits?per_page=3&sha=`

  const truncate = v => {
    const newline = v.indexOf('\n')
    return newline > 0 ? v.slice(0, newline) : v
  }

  const formatDate = v => v.replace(/T|Z/g, ' ')

  createApp({
    setup() {
      const currentBranch = ref('main')
      const commits = ref(null)

      watchEffect(() => {
        fetch(`${API_URL}${currentBranch.value}`)
          .then(res => res.json())
          .then(data => {
            console.log(data)
            commits.value = data
          })
      })

      return {
        branches: ['main', 'v2-compat'],
        currentBranch,
        commits,
        truncate,
        formatDate,
      }
    },
  }).mount('#demo')
</script>

<style>
  #demo {
    font-family: 'Helvetica', Arial, sans-serif;
  }
  a {
    text-decoration: none;
    color: #f66;
  }
  li {
    line-height: 1.5em;
    margin-bottom: 20px;
  }
  .author,
  .date {
    font-weight: bold;
  }
</style>