Nuxtで実案件で開発するときに作ったオレオレプラグイン - Qiita
ここ数ヶ月はNuxt.jsで開発することが多いのですが、意外と~/pluginsディレクトリにいろいろ貯まってきたので軽めの共有です。 前提 mode: 'spa' で開発しています こうするとサーバーサイドレンダリング(SSR)はなくなります SSRの場合は nuxtServerInit というAPIを利用することでストアの初期化などが可能です SPAの場合は初期化処理を ~/plugins で実装することが可能です 名前からしてpluginsで初期化するのが正しいのかどうかあんまり自信ないですが、実装上はこれで可能です。 ~/plugins の挙動 （build後の状態はわからないですが）.nuxt/index.js を見ると、以下のような状態になっています。 // 略 import plugin0 from 'plugin0' import plugin1 from 'plugin1
データの取得
データの取得 Nuxt では、API からデータを取得する方法が 2 つあります。fetch メソッドまたは asyncData メソッドを使用できます。 Nuxt はコンポーネントの mounted() フックでデータを取得するなど、クライアントサイドアプリケーションにおける従来の Vue のデータの取得パターンをサポートしています。しかしユニバーサルアプリケーションでは、サーバーサイドレンダリング中にデータをレンダリングするために Nuxt 特有のフックを使う必要があります。これにより、必要なデータがすべて存在する状態でページをレンダリングすることができます。 Nuxt には、データを非同期に読み込むためのフックが 2 つあります。 asyncData。このフックは、 ページ コンポーネントでのみ使用できます。fetch とは異なり、クライアントサイドレンダリング中にローディングプレー
axios、async/awaitを使ったHTTPリクエスト(Web APIを実行) - Qiita
GitHubリポジトリ 発音はアクシオスのようです。 http://ejje.weblio.jp/content/Axios 戻り値がPromiseベースなのでjQueryの$.ajaxやFetch APIのように使える ブラウザだけでなくNode.jsでも使える 使い方 npmからaxiosをインストールします。 const axios = require('axios'); const url = "https://qiita.com/api/v2/items"; axios.get(url).then(res => { const items = res.data; for (const item of items) { console.log(`${item.user.id}: \t${item.title}`); } }).catch(error => { const { sta
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とFirebaseでサイトを作った話 -1- はじめに | isoppp.com
TL;DR 当サイトの構築について半分記録、半分実装向けのノリで記載します。 一言で言えば Nuxt x Firebae x Markdown記事ブログ です 目次 このサイト作ったぞシリーズです。 Nuxt.jsとFirebaseでサイトを作った話 -1- はじめに イマココ Nuxt.jsとFirebaseでサイトを作った話 -2- CSSとSassとPostCSSとVue Nuxt.jsとFirebaseでサイトを作った話 -3- Markdownの変換とNuxtへの組み込み Nuxt.jsとFirebaseでサイトを作った話 -4- PWA/GTM/sitemap/feed対応 Nuxt.jsとFirebaseでサイトを作った話 -5- netlifyとFirebase 作り始めたきっかけ ずっと非公開なポートフォリオページみたいなものはあったのですが、 それ自体がかなり古くなって
Nuxt.js で Markdown ベースのブログを構築する（Nuxt.js 編） - jmblog.jp
この記事は「Nuxt.js で Markdown ベースのブログを構築する」シリーズの一部です。 Nuxt.js で Markdown ベースのブログを構築する（Markdown 編） Nuxt.js で Markdown ベースのブログを構築する（Nuxt.js 編） ← ここ Nuxt.js で Markdown ベースのブログを構築する（サイトパフォーマンス編） 今回は Nuxt.js 側の実装について紹介する。 記事ページの実装 本ブログでは、記事ページの URL を /posts/YYYY-MM-DD/xxx-yyy-zzz/ というルールにしている。このような動的なルーティングを Nuxt.js で実装するには、 pages └── posts/ └── _date/ └── _slug/ └── index.vue というディレクトリ構造にするだけで済む。_ で始まるディレク
Vuex ストア - Nuxt.js
ストアを使って状態を管理するのは、どういった大きなアプリケーションを作るにあたっても重要なことです。それがなぜ Nuxt がそのコアに Vuex を組み込んでいるかの理由です。 ストアを有効化する Nuxt は store ディレクトリを確認します。もし隠しファイルや README.md ではないファイルが含まれていたら、ストアは有効化されます。これは Nuxt が以下を行うことを意味しています： Vuex をインポートする ルートの Vue インスタンスに store オプションを追加します。 モジュール store ディレクトリの中にあるすべての .js ファイルは名前空間付きモジュール に変換されます（index はルートモジュールになります）。state の値は不必要に状態がサーバサイドで共有されてしまうことを避けるため、常に function であるべきです。 はじめに、ステート
Vue.jsとNuxt.jsを使用して、Webページのページ遷移に気持ちいいアニメーションを与えるチュートリアル
Vue.jsとNuxt.jsを使用して、スマホアプリで見かけるようなアニメーションを伴った滑らかなページ遷移をWebページに実装するチュートリアルを紹介します。 Native-Like Animations for Page Transitions on the Web 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 最近見かけたページ遷移のアニメーション 使用する理由 前提となる知識 始めてみよう フックの設定 最近見かけたページ遷移のアニメーション フロントエンドのUIで、最近私が最も刺激を受けたのは、スマホアプリで見かけるような滑らかなページ遷移（トランジション）です。こういったインタラクションを実装するのは難しそうに見えますが、一度実装方法をマスターしてしまえば、さまざまなUIに使用することができます。 ここで紹介する方
【OGP／PWA】サイト公開時に設定したい内容 - Qiita
最近WEBサイト作ってて、そろそろOGPとかmanifest.jsonあたりは設定したほうがいいよってアドバイスももらい始めたのでマジメに実装していこうと思います。 そんで、自分用のメモ。いつもググってしまうので記事にどっちも書いておこう！と思い立ったわけです。以前作成しましたあの楽器のWebに実装してみました。結構カンタンにできますので、参考に。 なお、あの楽器をWeb実装した記事は以下になります。 【初音ミク】Innocence【3DPV】に出てくる「あの楽器」のWeb版 タイトル／説明／OGPを設定していこう。 OGPとは OGPは、TwitterやFacebook、その他サイトなどでURL参照を貼った時に表示される画像／タイトル／説明です。これを設定しておくと拡散時に「このサイトは何のサイトなのか」といった情報がパット見で判別できるようになるため設定をおすすめします。 <meta
Nuxt.jsでPWA化してみたらとても簡単だった - ShoYamane.me
掲題の件、Nuxt.jsのプリセットでPWAのアドオン機能があるため、試してみました。結論からいうとmanifestだけ設定すればあとは全部勝手にやってくれるのでとても便利ですねこれ。 WordPressでPWA化をやってみたことがあるのですが、読み込むイメージファイルやjsを手動で設定しなければいけないため保守性が大変そうですが、Nuxt.jsのPWAアドオンはその辺上の画像のように全部やってくれるのでとても便利です。 Lighthouseのスコア 通常時 CreateJSとGoogle Font外してみた時 導入方法 pwa - Nuxt.js 導入方法も簡単でドキュメント見てもらえればわかると思うのですが、以下のとおりです。 module.exports = { modules: ['@nuxtjs/pwa'], manifest: { name: 'appName', short_
Nuxt.js+Firebase HostingのサイトをPWA化してLighthouseで(ほぼ)100点満点を目指す - razokulover publog
1年くらい前に仕事でNuxt.jsをいじる機会があったんだけどそれ以来使ってなかった。 ただ、GW中にNuxt tech bookを読んだところ久々にいじりたくなってしまい。 そこでちょうどFirebase HostingとPWA化に関して調べてたとこだったので、Nuxt.jsのサイトをPWA化してFirebase Hostingで動かす手慣らしでもしておこうかと思いやってみた。 ただ、普通にやっても面白くないので一応Lighthouseのスコアを満点にすることを目指してみることにした。 コンテンツはNuxtのスターターキットの初期生成されるページ。このページを対象に行う。 以下、Firebase Hostingの設定・Nuxtのプロジェクト作成・PWA設定・Lighthouseのスコア上げの流れで説明してます。 一応ソースはこちらで。 nuxt-firebase-hosting-samp
SCOUTER開発者ブログ
2024-04-29 CSSってどんな勉強をしたらいいの？おすすめの勉強法3選！ 文字やタブなどWebサイトのデザインを作成するマークアップ言語がCSSです。 CSSを勉強すると、おしゃれなWebサイトやかっこいいWebサイトが作れるようになります。 また、Webサイトを作るときに必要なHTMLを理解するのにも役立ちます。 CSSを勉強するならできるだけ効率よく勉強できるようになりたいですよね。 ではCSSの勉強法はどのようなものがあるのでしょうか。 CSSの勉強法は、スクール […] 2024-04-29 WEBエンジニアから見たXserverの使い勝手と評判 レンタルサーバーのおすすめサイトを見ると、大体どこでも上がってくる有料のレンタルサーバーの一つに「Xserver」があります。 このXserverとは、どのようなサーバーで、サービスにはどのようなものがあるのか。 ホームページ関連
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のasyncDataで静的ファイルを読み込む
概要 Nuxt.jsを使って色々作っていると、generate(静的出力)時の初期表示内容にJSONファイルの内容を取り込んで表示したい、という場面に出くわします(多分)。 そんなときにどうやって取り込めばいいのかという方法を書き残しておきます。 方法 asyncDataメソッドを使います。 また、ページが動的ルーティングの場合はroutesオプションも使う必要がでてきます。 これら2つで要件は満たせるのですが、その中でどうやって読み込まれるかによって出力されるJS(ランタイム=初期表示以降に読み込まれる内容)が変わってくるので使い分ける必要があります。 サンプルケース 説明/理解しやすいように、以下のサンプルケースを用いて説明をしていきます。 Nuxt.jsを使ってブログシステムを作成する 記事はMarkdownで書き、それらを変換した個別のJSONファイルがあるものとする 初期表示時に
Nuxt.jsのasyncData メソッドを使ってRSSを読み込む - Qiita
この記事はオールアバウトアドベントカレンダー18日目の記事です Nuxt.jsの機能を使って RSSを取得して値を書き出してみます 使う機能 asyncData メソッド サーバーサイドでデータを取得し、それをレンダリングしたいことがあるでしょう。Nuxt.js はコンポーネントのデータをセットする前に非同期の処理を行えるようにするために asyncData メソッドを追加しています。 参照: https://ja.nuxtjs.org/guide/async-data/ 手順 前準備 npm install xml2js XMLを扱うのでparseしてくれるモジュールinstallしておく コンポーネントを用意する pages/rss.vueという名前のpageコンポーネントを用意します 先に完成形を↓↓ <template> <div> <ul> <li v-for="item in
async/awaitが手になじむまで色々書いてみるよ〜 - 俺、サービス売って家買うんだ
現在運用中のプロジェクトのNodeのバージョンを7から8にあげたのでPromiseで書いていた箇所を徐々にasync/awaitに置き換えています。 簡単に書ける一方でPromsieに慣れすぎていたため、「これ並列処理になるんだっけ」とか、「てか、これ動く？」見たいなレベルで手になじまなかったので色々ためして馴染もうと思います。 利用するタイマー関数 function timer(ms, name) { console.log(`name: ${name} start!`) return new Promise((resolve, reject) => { setTimeout(() => resolve(name), ms) }) } Case.1 awaitを書いて非同期処理の関数を並べて書く (async () => { const result1 = await timer(100
【GAS】スプレッドシート内の全シートへのリンク一覧を作る - Qiita
Google スプレッドシートで仕様書なんかをまとめていると、シート数が20、30になっていたりすることがある。 こうなると目的のシートを探すのに手間がかかるので、インデックスみたいなシートを作っておきたくなる。 手作業でリンクをいちいち設定するのも面倒なので、リンク一覧を作るGASを作った。 function PutLinks() { // スプレッドシート内の全シートとスプレッドシートのID var sheets = SpreadsheetApp.getActive().getSheets(); var ssId = SpreadsheetApp.getActive().getId(); // ハイパーリンク文字列の配列 var linkList = [[]]; for(var i=0; i<sheets.length; i++) { // シートのIDと名前 var sheetId
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Nuxt.jsでモジュールモードのVuexストアのmutationにコンポーネントからアクセスする - Qiita
Nuxt.js で作った静的サイトを PWA 化する - Qiita
Nuxt.jsとFirebaseでSPA×SSR×PWA×サーバーレスを実現する - DMM inside
generate プロパティ
nuxt-starter