CDN版Vue.js + axios でさくっとAjaxしてみる
CDN版Vue.js + axios でさくっとAjaxしてみる Vue.jsはBabelなどを導入しなくても、scriptタグで読み込んで、わりと気軽に扱えるところも売りだったりします。 今回はVue.jsとaxiosを使用して、簡単なjsonファイルを読み込んで表示するということをしてみます。 投稿日2018年12月14日 更新日2021年06月27日 Vue.js v2.5.21 axios v0.18.0 を使用します。 index.html ベースとなるhtmlです。 https://cdn.jsdelivr.net からVue.jsとaxiosを読み込みます。 IEに対応するためにPromiseも読み込んでおきます。 メインとなるソースコードはsrc.jsに書きます。 後に作成するpriceコンポーネントを配置します。 index.html <!DOCTYPE html> <h
Vue.jsでVuex+axiosを利用してAPIを叩く - Qiita
概要 Vue.jsでVuex+axiosを利用してみました。 コードをシンプルにすると理解が進んで良いです^^ GitHubにコードをUPしましたので、よろしければご参考ください。 https://github.com/kai-kou/vue-js-typescript-vuex-axios 環境構築 Dockerを利用して、APIのモックサービスも立ち上げられるようにdrakovを利用しています。 drakovについては下記をご参考ください。 api blueprintとdrakovを利用してAPIモックサーバを立ち上げる https://qiita.com/kai_kou/items/bdbb6c3f8d1ac655595d
Excelファイルをaxiosで扱うときのメモ - Qiita
return c.Blob(http.StatusOK, "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", buf.Bytes())
自分の為のまとめサイトをNetlifyにNuxtで作って公開した - Qiita
import axios from 'axios' import CardlItem from '~/components/Qiita/CardItem.vue' const BASE_URL = 'https://qiita.com/api/v2/tags/' export default { components: { CardlItem }, data () { return { tag: '', // 検索時にリクエストに含めるタグ postList: [] // APIレスポンスを格納する器 } }, created () { // 初回ページ描画時にキーワード「nuxt.js」でQiitaのAPIをコール this.tag = 'nuxt.js' this.sendRequest(this.tag, 1) }, methods: { search (tag, page) { t
Nuxt.jsでサーバーサイドからAPIアクセスして表示を行う - Qiita
<template> <div id="app"> <h1>Nuxt API Test</h1> <div class="itemContainer"> <Item v-for="(result, index) in items" :key="index" v-bind:id="result.id" v-bind:name="result.name" v-bind:value="result.value" > </Item> </div> </div> </template> <script> import Item from '~/components/Item.vue' import axios from 'axios' export default { components: { Item }, head: { title: 'Nuxt API Test' }, asyncData
nuxtjs/axiosでinterceptorを使う[Nuxt.js Vue.js] | myBlog
最近 Vue.js ばっかり触っている。 その流れで Nuxt.js を使って Web サイトを作っているが， @nuxtjs/axios の interceptor を使おうとしてハマったのでメモを残しておく。 目次 そもそもどういった時に使いたいかというと， axios の interceptor @nuxtjs/axios の interceptor おわりに そもそもどういった時に使いたいかというと，ログインが必要なサイトを作るときに token 情報をリクエストヘッダーに含める時とかに使うと便利！ 例 リクエスト発行直前に，token があれば header に詰める！みたいな処理を差し込む レスポンスに新しい token が入っていたら，token を更新する 上記例をリクエストごとに書くのはナンセンスなので，axios の interceptor に書いておいて，毎回リクエス
はじめての Nuxt.js + Vuex + axios - Qiita
この記事について 下記のもくもく会でやりました。 【初心者・1人参加歓迎】ITプロラボ_Laravel / Vue.js もくもく会(Web系)#3 - connpass 普段は PHP でバックエンドのコードを書くことが多いですが、ここ １ 年くらいで急激にフロントエンド書く機会が増えてきているので、Vue.js + Vuex （ついでに最近注目されている Nuxt も） でなんかつくってみよう、という、いわゆるやってみた系の記事です。 概要 定番の TODO リストをつくります。 フロントエンドに Nuxt.js 、バックエンドに Laravel を使います。 環境 nuxt を入れると、vue, vuex の他、開発に必要なモジュールをまるっと入れてくれるので、後述する vue init をした後、 yarn install すれば、すぐに開発をスタートすることができます。 nuxt
https://github.com/mya-ake/nuxt-api-error-handling-sample/blob/master/app/lib/resources/Resources.js
プラグインディレクトリ
プラグインディレクトリ plugins ディレクトリにはルート Vue.js アプリケーションがインスタンス化する前に実行する Javascript プラグインが含まれています。 これは Vue プラグインを追加し、関数や定数を導入する場所です。Vue.use() を使用する必要がある時は都度 plugins/ ファイルを作成し、nuxt.config.js の plugins にそのパスを追加する必要があります。 外部パッケージ サーバーとクライアント両方に HTTP リクエストを行うためには、アプリケーションで外部パッケージ/モジュール（著名な例は axios です）を使用することをお勧めします。 はじめに、npm か Yarn を介してインストールします。
axios Interceptorsを使用して共通処理を作る。 - Qiita
はじめに この投稿はNuxt.js + Auth0 + Spring Boot で作る認証付きSPAのおまけです。 リポジトリは以下 フロント サーバサイド 概要 axiosを使用して非同期通信を行う際 リクエスト時やエラー時などで共通処理を挟み込みたいことがあると思います。 今回は リクエスト時にAuthorizationヘッダーを付与すること エラー発生時にエラーの内容をトーストで表示すること この二点をaxios Interceptorsを使用して実現したいと思います。 エラー表示に使用するToastを設定する 先ずはトーストの準備をしましょう。 yarnでdependenciesに追加します。
5分で分かる！ Nuxt.js + axiosでAPIを使ってみる。 | ネクストページブログ
HOMEブログウェブ制作5分で分かる！ Nuxt.js + axiosでAPIを使ってみる。 | ネクストページブログ 皆さん、Nuxt.jsを使っていますか？ 前回の記事で、Nuxt.jsのユニットテストについて書きました。 今回はaxiosで行うHTTP通信についてです。 axiosって何？ サイトには「Promise based HTTP client for the browser and node.js」とあります。 ブラウザやnode.jsで動くPromiseベースのHTTP client、そのままですね… ajaxのようにAPIを使う必要がある時などに、axiosを使用すると便利に実装することができます。 Vue（Nuxt.js）で使うことが必須というわけではないですが、色んなサイトを見ると使用されることが多いライブラリのようです。 Nuxt.jsの公式サイトにも、少し紹介が
NuxtのasyncDataで複数のHTTPリクエストを扱う - Qiita
asyncDataに限らないんだけど await Promise.all() 使うとキレイに書けるよねって話。 TypeScript x ES6 な感じ。 prefetch的な処理をキレイにかけるNuxtは最高だなと思います <script lang="ts"> import Vue from "vue"; import Component from "nuxt-class-component"; import Foo from "~/Foo"; import Bar from "~/Bar"; @Component({ async asyncData({ app, params }) { const id = _.get(params, "id"); // 2つのHTTPのレスポンスを受けてからページがレンダリングされる const [foo, bar] = await Promise.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Ionic 4でVue.jsを使ってみた - Qiita
https://github.com/mya-ake/nuxt-api-error-handling-sample/blob/master/app/plugins/resources.js
https://github.com/yahsan2/wp-nuxt-for-netlify/blob/943004874d1e2a710eca9e65c66823bc04dbc76c/nuxt.config.js
GitHub - mya-ake/nuxt-api-error-handling-sample
mya-ake.com
GitHub - sitepoint-editors/nuxt-ssr-blog: Serverless static-generated Nuxt.js Universal JavaScript web application. Demo app, accompanying the SitePoint article.
GitHub - yahsan2/wp-nuxt-for-netlify
Setup
