表題の通りです。

こちらのサンプルを見ながら、Vue.jsとAxiosを使って、Backlogのプロジェクトの現状を可視化できるようになSPAを作りたいと思っています。

Vue.jsとAxiosなら驚くほど簡単に作れる！外部APIを使ったWebアプリの実例 – WPJ

課題IDとサマリを取得する例

引用元のサイトではニューヨークタイムスのAPIを使ってニュースを取得して表示しています。使うAPIをBacklogに変えて、使うパラメータを変えてあげればすぐ取ってこられました。

app.js

const vm = new Vue({
  el: '#app',
  data: {
    results: []
  },
    mounted() {
        axios.get("https://yoshikiito.backlog.jp/api/v2/issues?apiKey=hoge")
         .then(response => {this.results = response.data})
    }
});

index.html

<!DOCTYPE;html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css">
    <title>The greatest news app ever</title>
</head>
<body>
    <div class="container" id="app">
        <h3 class="text-center">VueNews</h3>
        <div class="columns medium-3" v-for="result in results">
            <div class="card">
                <div class="card-divider">
                    {{ result.issueKey }}
                </div>
                <div class="card-section">
                    <p>{{ result.summary }}.</p>
                </div>
            </div>
        </div>
    </div>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://unpkg.com/vue"></script>
    <script src="app.js"></script>
</body>
</html>

実行結果

index.htmlを開くと以下のように表示されました。

内容は私が遊びで作ったプロジェクトの中です。

これで、あとは特定のカテゴリの課題だけ抜き出したり、課題のステータスの内訳を円グラフで表したりができそうです。