前準備
プロジェクトに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'
})