Nuxt.js/Vue.jsでJSONPを取得する

前準備

プロジェクトにvue-jsonpをインストールします。
vue-jsonp - npm

yarn add vue-jsonp

pluginsの設定、およびnuxt.config.jsでの設定

~/plugins/vue-jsonp.js

import Vue from 'vue';
import VueJsonp from 'vue-jsonp';

Vue.use(VueJsonp);

nuxt.config.js

省略
  plugins: ['~/plugins/vue-jsonp'],
省略

この設定をし、再度ローカルサーバを立ち上げるコマンドを打てば this.$jsonp が使えるようになります。

static配下のローカルjsonpにアクセスするサンプルコード

$jsonpの第二引数のObjectのcallbackNameにはjsonp側の関数名を指定すればOKです。
他に渡すパラメータが必要な場合は第二引数のObjectに一緒に入れちゃいましょう。
一緒に入れてあげるとリクエストURLにクエリパラメータが自動で付いてアクセスしてくれます。

コンポーネント

 async mounted() {
    const url = '/jsonp/test.js';
    const json = await this.$jsonp(url, {
      callbackName: 'getData'
    });
    console.log(json);
 }

static/jsonp/test.js

getData({
  data: 'sample'
})

参考リンク

覚え書き Vue.jsでjsonpを使ってみる - Qiita