自分の為のまとめサイトを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
はじめての 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.
SEO、OGP……Vue.js製SPAの「困った」を解決できる「Nuxt.js」が便利だ！
Vue.jsでSPAを作ったものの、検索エンジンのクローラーやSNSのOGP取得といった問題で困ったことはありませんか？ サーバーサイドレンダリングを簡単に構築できるNuxt.jsの活用方法を解説します。 ユニバーサル（Isomorphic）JavaScriptはJavaScriptコミュニティで一般的な用語になりました。ユニバーサルJavaScriptとは、クライアントとサーバーの両方で実行できるJavaScriptコードのことです。 Vue.jsを含むモダンJavaScriptフレームワークの多くは、シングルページアプリケーション（Single Page Application : SPA）の構築を目的に作られています。シングルページアプリケーションはページがリアルタイムで更新されるので、アプリの動きが軽快でユーザーエクスペリエンスが向上します。さまざまな利点がありますが、欠点もありま
Nuxt.jsのパフォーマンス向上テクニック - Qiita
Nuxt.jsのプロジェクトで使用しているパフォーマンス向上のためのテクニックです。 .nuxt/dist と static ディレクトリはNginxから直接配信する 静的ファイルはNuxt.jsのサーバを使わずにNginxから配信します。CDNなどを使うともっと効果的でしょう。 location / { root /path/to/nuxt/static; try_files $uri @proxy; } location @proxy { proxy_pass http://127.0.0.1:3000; } location /_nuxt { alias /path/to/nuxt/.nuxt/dist; } APIエンドポイントをサーバーとクライアントで分ける SSRのサーバとAPIサーバが同一LAN内の場合は、余計なネットワークコストを発生させないように、SSR時はLAN内で通信
【コードある】Nuxt + WordPress で netlify 運用が爆速すぎて神だった - Qiita
まずは作ったサイトを貼っておきます。 https://wp-nuxt-for-netlify.netlify.com/ いかがですか？現在住んでいるオーストラリアのADSLな爆遅回線でも、爆速です。 WordPress は heteml のレンタルサーバーですよ？ 感動しすぎたので、徒然なるままに〜。 ざっくり構成 WordPress側 リニューアル中の家族ブログ（ https://nishida.lol ） Heteml レンタルサーバー（月額 2000円） Heteml で無料SSL WP REST API でGET APIだけ利用 https://v2.wp-api.org/ フロント側 Nuxt Nuxt.js 1.0.0 nuxt generate で静的ファイル生成 netlify にホスティング https://www.netlify.com/ GitHub 上で nuxt
Vue.js製フレームワークNuxt.jsではじめるUniversalアプリケーション開発
Vue.js製フレームワークNuxt.jsではじめるUniversalアプリケーション開発 花谷拓磨 Vue.jsでUniversalなSPAを開発できるフレームワークであるNuxt.jsのバージョン 1.0のリリースがいよいよ近づいてきました。 本稿では、シングルページアプリケーション（以下 SPA）開発によって生じた問題を解決するために生まれたサーバーサイドレンダリング （以下 SSR）を中心に、Vue.jsでの開発を強力にサポートするNuxtについて、その魅力と基本的な使い方をご紹介いたします。 Nuxt.jsとは？ Nuxt.js（ナクストと読みます）はReact.jsベースのSSR用フレームワークであるNext.jsに触発されて作成された、Vue.jsベースのフレームワークです。 特にUIの描画サポート に主眼をおき、SSRをはじめとした様々なサポートを行ってくれるものとなります
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
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