スプレットシートのデータをVue.js（vue-table-2）でいい感じに表示するまでの流れの解説です。
#GoogleスプレッドシートをAPIサーバー化
本記事の作成にあたって参考にしたサイトのご紹介です。
（参考１）
Qiita[@ksyunnnn] | Googleスプレッドシートのデータを表示させてリッチな静的サイトを作る
スプレットシートのAPIサーバ化/Vue.jsで取得データの描画について参照（特にHTML/JS/CSSはベースにさせて頂きました。）
（参考２）
Vue.js公式ページ | axios を利用した API の使用
axiosを用いたAPIからのデータ受け取りについて参照
（参考３）
SIerだけど技術やりたいブログ | Vuejs vue-tables-2 でテーブル表示
vue-table-2のお作法について参照
【今回活用するデータ】
過去の記事でも取り扱っている会議の参加者リストを例として活用します。
スプレットシートは公開しているので、必要に応じてコピペしてご活用ください。今回扱うデータセットはこちらです。
#GoogleスプレッドシートをAPIサーバー化
まずはスプレットシートを用意していただいて、参考記事（Googleスプレッドシートのデータを表示させてリッチな静的サイトを作る）にならってAPIサーバー化を行ってください。
念のための補足ですが、スプレッドシートのIDは、黄色下線部の部分に該当するのでお手元のスプレットシートをご確認ください。
#Vue.js（SPA）でデータを描画（HTML/JS/CSS）
Vue.jsでの表示にあってのコードは以下の通りとなります。
<meta http-equiv="content-type" charset="utf-8">
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div id="app">
<h3 class="vue-title">厳かな会合参加者リスト</h3>
<v-client-table :columns="columns" :data="data" :options="options">
<a slot="画像" slot-scope="props" :href="props.row.画像" target="'_blank'">
<img :src="props.row.画像" width="40" height="40" />
</a>
</v-client-table>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.8/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.js"></script>
<script src="https://rawgit.com/matfish2/vue-tables-2/master/dist/vue-tables-2.min.js"></script>
<script src="main.js"></script>
Vue.use(VueTables.ClientTable);
new Vue({
el: '#app',
data() {
return {
loading: true,
errored: false,
columns: [
'画像',
'名前',
'出身地',
'主な実績'
],
data: [],
options: {
sortable: [
'name'
],
texts: {
filterPlaceholder: 'search'
},
columnsDropdown: true,
perPage: 25
}
}
},
filters: {
currencydecimal(value) {
return value.toFixed(2)
}
},
mounted() {
// axiousを用いてスプレットシート（APIサーバ化）から値を取得
axios
.get('https://script.google.com/macros/s/AKfycbz792Y12WYDaiW2U5CiUdgCj8Uu9xWIDfq6cYfyXqq5m3MFRxU/exec')
.then(response => {
this.data = response.data
})
.catch(error => {
console.log(error)
this.errored = true
})
.finally(() => this.loading = false)
}
})
* {
box-sizing: border-box;
font-size: 15px;
}
#app {
max-width: auto;
margin: 0 auto;
padding: 10px;
}
td {
white-space: nowrap;
}
table {
width: 100%;
border-collapse: collapse;
}
thead th {
border-bottom: 2px solid #0099e4;
/*#d31c4a */
color: #0099e4;
}
th,
th {
padding: 0 8px;
line-height: 40px;
}
thead th.id {
width: 50px;
}
thead th.state {
width: 100px;
}
thead th.button {
width: 60px;
}
tbody td.button,
tbody td.state {
text-align: center;
}
tbody tr td,
tbody tr th {
border-bottom: 1px solid #ccc;
transition: all 0.4s;
}
tbody tr.done td,
tbody tr.done th {
background: #f8f8f8;
color: #bbb;
}
tbody tr:hover td,
tbody tr:hover th {
background: #f4fbff;
}
button {
border: none;
border-radius: 20px;
line-height: 24px;
padding: 0 8px;
background: #0099e4;
color: #fff;
cursor: pointer;
}
/* columns choice button */
button.btn.btn-secondary.dropdown-toggle {
margin-right: 10px;
}
#アプリイメージ（実行結果）
最終的に、このようなアプリとして動作します。
vue-tables-2のオプションを変更すれば、フィルタなどのオプションを簡単に付与することができます。冒頭にご紹介した記事（SIerだけど技術やりたいブログ | Vuejs vue-tables-2 でテーブル表示）で、大変分かりやすくデモをまとめてくださっているのでぜひ気になる方はぜひ確認してみてください。
スプレットシートのデータをVue.js（SPA）で表示する方法についてでした。この組み合わせで且つ、axiousやvue-tables-2を併用している参考サイトがなかったので、冒頭ご紹介したブログを参考にさせて頂きながら組み合わせでアプリを組んでいます。
簡単にWebアプリケーションが作れるのは大変魅力的です。ちなみに社内利用に閉じた利用ですが同じ構成で作ったデータビューワアプリをFirebaseでデプロイしています。認証機能もさくっと作れるので大変ありがたいです（何より無料枠でまかなえるありがたさ）。