[B! Nuxt.js] faibouのブックマーク

NuxtのSSRモードでメモリリーク？原因はaxios? - ANDPAD Tech Blog

はじめに最近金髪から黒髪に戻して更生しました藤井（フロントエンドエンジニア）でございます。久々にテックブログに貢献させて頂きます！今はメインの施工管理機能の改修の傍ら、新機能開発にも携わっておりまして、フロント側はSSRモードのNuxtを採用しております。さて、そんな中SREチームから「フロントエンドがメモリリークしていませんか？」との通報が入りました。いやいや、そんなハズは・・と思いながらもDatadogを見てみると見事にメモリ消費量が右肩上がりに増えていってます。なぜじゃ・・・。調査開始メモリリークになるような処理を入れた覚えはないぞ！と思いつつも調査開始です。ひとまずChromeのDevtoolでPerformanceやMemoryタブを見ながら確認しますが、これと言って原因が見つかりません。おかしい・・。なんでだろう。あれこれ試しましたが解決せず、ほぼ1日消化しました

faibou 2022/08/05

Nuxt.js

リンク

nuxt×axiosでローディング処理の共通化 - gotoshin

この記事について nuxt×axiosのプロジェクトでローディング処理を共通化したのでその方法を記載します。テンプレートはbootstrap-vueを使用しています。概要 axiosを使用しているため、axiosの処理中にローディングが走る用に設定します。手順の概要は以下です。ローディング用のコンポーネントを作成する。ローディングの表示はv-ifで表示を切り替える。また、v-ifの条件をstoreに定義し、別コンポーネントからのアクセスも可能にする（リンク）全ページ共通のdefault.vueにローディング用のコンポーネントを設定。（リンク） axiosのinterceptors.request.useとinterceptors.response.useを使用してaxiosの前後で、上記でstoreに定義した条件を切り替える（リンク） nuxt.config.jsのmodu

faibou 2022/07/21

Nuxt.js

リンク

vue-infinite-loadingでNuxt.jsでも無限スクロール - くらげになりたい。

無限スクロールしたいなぁと思ったら、 vue-infinite-loadingという便利があったので、その時の備忘録。おぉ無限スクロールもできた(*´ω｀*) Vueもvue-infinite-loadingもすごい(*´ω｀*) pic.twitter.com/dtp1sxYUyz— きらぷか📚積読ハウマッチ開発中【事前登録はじめました】 (@kira_puka) July 6, 2019 準備するインストール $ npm i --save vue-infinite-loading pluginの作成 plugins/vue-infinite-loading.tsを用意 import Vue from "vue"; import InfiniteLoading from "vue-infinite-loading"; Vue.use(InfiniteLoading); nuxt.c

faibou 2021/06/21

Nuxt.js

リンク

Nuxt JSのコンテンツを多言語化する方法

2023年2月7日 JavaScript, Nuxt JS Nuxt JSで作成されたプロジェクトをi18nというプラグインを使って多言語化に対応する方法を紹介します。あまり実装する機会はないかと思いますが、自分用に備忘録として。自動的に翻訳してくれるわけではなく、言語ファイルを用意して切り替えるという仕様です。すでにNuxt JSでプロジェクトを作成していることを前提に書いていきます。 ↑私が10年以上利用している会計ソフト！ i18nをインストールする公式サイトを参考に、yarn または npm でインストールします。 Yarn yarn add nuxt-i18n NPM npm i nuxt-i18n 言語ファイルを作成今回は英語と日本語のWebサイトを作成していく手順を紹介します。プロジェクトの第一階層に「lang」フォルダーを作成し、その中に英語版を「en.js」、日本語版

faibou 2021/06/07

Nuxt.js

リンク

【Nuxt.js】pagination実践編:$router.pushで簡単実装！ | aLiz Nuxt

前置きページ数に応じて urlと表示が変わるpaginationです🍒 前回やった導入編と全く別物です！こっちの方が簡単なので別パターンとして紹介🌟 記事タイトルが紛らわしいので、まとめて名称変えるかもしれません。こちらの続きはまた別記事にて…！構成・pagination部分をコンポーネント化・使用するページからpropsでdataを渡す🎁 ・ページ数をurlに表示させる🔍($router.push) ・全7ページで、ページ数に応じて表示を変更 Step1: コンポーネントでpropsを用意【構成】使うコンテンツによって最大ページ数などが変わるためpropsを使用・query: ページネーションを使うコンテンツ・length: ページの長さ・now: 今いるページ ) components

faibou 2020/12/08

Nuxt.js

リンク

【Nuxt.js】pagination実践編:$router.pushで簡単実装！｜aLiz

🎈 この記事はWPへ移行しました【Nuxt.js】pagination実践編:$router.pushで簡単実装！ # 前置きページ数に応じて urlと表示が変わるpaginationです🍒 前回やった導入編と全く別物です！こっちの方が簡単なので別パターンとして紹介🌟 記事タイトルが紛らわしいので、まとめて名称変えるかもしれません。こちらの続きはまた別記事にて…！ firebaseを月曜日に公開予定でしたが、 Cloud Firestoreがバグり。。。それが落ち着いてからにします☁️ 今後は火・木に投稿していく予定です！ # 構成・pagination部分をコンポーネント化・使用するページからpropsでdataを渡す🎁 ・ページ数をurlに表示させる🔍($router.push) ・全7ページで、ページ数に応じて表示を変更 # Step1: コンポーネントでpr