Nuxt.js axios(非同期通信)で初期データを取得して表示してみる。

dataメソッドを追加する

dataメソッドを追加してjson型のデータを返すようにする。
<template>内のデータを表示したい個所に{{key}}を追加する。

/pages/index.vue

<template>
    <div>{{ text }}</div>
</template>

<script>
export default {
  name: 'IndexPage',
  data() {
        return{
            text: "テスト"
        }
    } 
}
</script>

http://localhost:3000/

dataメソッドで返されたデータを<template>内で参照できてます。
同じ要領で初期表示時に外部からデータを取得しjson型のデータを返せば画面の初期値を表示させることができそうです。

asyncDataメソッドを追加する

asyncDataメソッドを追加してaxiosを使ってデータを取得。
<template>内のデータを表示したい個所に{{asyncDataメソッドのretrurnで指定した変数名.key}}を追加する。

/pages/index.vue

<template>
    <div>
        <ul>
            <li>{{ text }}</li>
            <li>{{ data.data1 }}</li>
            <li>{{ data.data2 }}</li>
        </ul>
    </div>
</template>

<script>
export default {
  name: 'IndexPage',
  async asyncData(context) {
        const data = await context.$axios.$get('http://localhost:3000/nuxt_test.json')
        return { data }
    },
  data() {
        return{
            text: "テスト"
        }
    },
}
</script>

/static/nuxt_test.json

{
    "data1":"データ1",
    "data2":"データ2"
}

※ asyncDataメソッドをdataメソッドの上に記述しないとESLintのワーニングが発生しました。
warning The "asyncData" property should be above the "data" property on line 14 vue/order-in-components

http://localhost:3000/

asyncDataメソッドで取得したデータが表示されました。
データ用のjsonファイルはstaticフォルダに追加したファイルを使ってますが、別のサーバに置いたjsonファイルも問題なく取得できます。