🖥

#Nuxt.js + #Vue で axios を利用して example.com にリクエストする簡単な例

に公開

Ready

axios をインストールして nuxt config にも追記しておく

$ yarn add @nuxtjs/axios

Edit nuxt.config.js

 modules: [
  '@nuxtjs/axios',
],

pages/index.vue

<template>
  <h1>
    {{ response }}
  </h1>
</template>

<script>
export default {
  async asyncData({ $axios }) {
    const response = await $axios.$get('https://example.com')
    return { response }
  }
}
</script>

Example

レスポンスとしてHTMLが返ってきて、タグがそのまま表示される

image

Google Chrome Tool

Network に直接 example.com へのリクエストは出てこない
axios という項目の中に隠蔽されてしまっているのだろうか

image

参考

Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/3121

チャットメンバー募集

何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ

Twitter

https://twitter.com/YumaInaura

公開日時

2020-05-03

Discussion