nuxtjsで日付を扱う（@nuxtjs/date-fns） - rochefort's blog
日付のformatをちょろっと変えたいと思ったのに、それなりに嵌ってしまったのでメモ。 version nuxt@2.14.9 vue@2.6.12 ライブラリ（@nuxtjs/date-fns） jsって日付の扱いが微妙で、ライブラリ使うのが無難なんですが、ググるとmomentの例がいくつかありました。 しかし、momentはもうメンテナンスモードという扱いで、新しいプロジェクトで利用するには推奨されていません。 Moment.js | Docs いくつか代替ライブラリはあるのですが、nuxtjsで利用するには、下記が便利そうでした。 nuxt-community/date-fns-module: Modern JavaScript date utility library - date-fns for Nuxt.js https://github.com/nuxt-community/
Viteを使ってVueやNuxtを動かしてみた
ハコザキです。 今回は高速なビルドツールとして話題のViteを使ってNuxtを動かしてみたいと思います！ Viteとは Vite（ヴィート）はVueJSの開発者であるEvan You氏が開発したノーバンドルなビルドツールです。 ReactやSvelteなどにもサポートしており、 より速く・より無駄のない開発環境を提供することを目的としてます。 モダンブラウザには対応してますが、 IE11などのレガシーなブラウザにも対応させるには別途 @vitejs/plugin-legacyを入れる必要があります。 2021年7月時点で公式サイトが日本語対応されたとのことで、 かなりアツいビルドツールとなっております。 Node.jsのバージョンが12以降であればViteを動かすことができるため、 今回は14.8.0で実行しております。 バージョンの切り替えはnodenvなどを用いてみてください。 Vue
Nuxt.jsのビルドを高速化してみる - ContractS開発者ブログ
こんにちは。Holmesでエンジニアをしている三澤です。 背景 弊社ではフロントエンドフレームワークとしてNuxt.jsを利用しています。プロジェクトが進みコードが増えてくるとビルドに時間がかかってくるのが悩みの種です。 ビルド時に最も時間がかかっているのは下記の画像の部分ですが、恐らくwebpackのビルドに最も時間がかかっているのではないかと仮定しました。 この仮定に基づいて何かいい方法はないかと探しているとNuxt.js本家のGithub上で興味深いissueを見つけました。 github.com ここでNuxtの中の人がこのようなことを言っていました。 今回は上記のコメントで取り上げられている方法を試してNuxt.jsのビルド高速化(=webpackのビルド高速化)に取り組んでみたいと思います。 背景 概要 実行結果 何もしていない場合 parallelプロパティ cacheプロパ
vue-observe-visibilityを使って画面内のときだけ表示する - くらげになりたい。
画面外のときは描画しないようにし、無限ローディング時の性能改善したときの備忘録。 vue-observe-visibilityを使って、画面内かを検知して表示を切り替えてみた。 インストール まずはインストール。 $ npm install --save vue-observe-visibility # IEなどIntersection Observer APIに対応してないブラウザ用のpolyfill $ npm install --save intersection-observer プラグインの作成 plugins/observe-visibility.tsを作成 // polyfillは最初に読み込む require('intersection-observer'); import Vue from "vue"; import VueObserveVisibility from "
Create a Blog with Nuxt Content
Create a Blog with Nuxt Content The Content module is a git files based headless CMS that provides powerful features when it comes to write blogs, documentation sites or just adding content to any regular website. In this post we will go through most of the benefits of this module and discover how we can create a blog with it.
nuxt/content のブログを full-static にする
nuxt/content でブログを作ってきたが、 Lighthouse (あるいは PageSpeed Insight) での計測において Performance が 80 点前後から向上させられていなかった。 TTB (Total Blocking Time) の項目が悪く、 JavaScript のロードに時間がかかっているらしいことはわかったのだが、これに対処することで Performance 100 点まで上げることができた。 JavaScript の inject を無効にする nuxt.config.js で build.analyze を true にしてファイルの大きさを確認してみたりもしたのだが、特に削減できそうなものが見当たらない。 Nuxt.js の static ビルドにおいてそういった問題があるのかどうか探していたところ、以下のような issue を見つけた。
Web Vitals, Google Search & the State Vue & Nuxt performance optimization in July 2020
As google recently announced their new guidelines for Web Vitals as an update of their existing Lighthouse KPIs, a lot of discussion on how to to optimize against these values has come up. I wanted to document some of the best practices that I ended up using. As a disclaimer, if your goal is to reach a performance score ≥ 85 with a tool like web.dev or pagespeed insights, any kind of client side h
Nuxtにも@nuxt/imageがあったので使ってみた
先日、以下の記事を書かせてもらったのですが React(Next.js)にあってVue(Nuxt.js)ないというのがあり、Vue(Nuxt.js)にこれあったらいいのになー、というのがあったわけです。 それは画像最適化モジュールです。 画像最適化モジュールとは？ webサイトに使用される画像は、実質1枚に見えますが、通常ユーザーは同じwebサイトを、PCから、タブレットから、スマホから閲覧します。また、これら閲覧する環境により、解像度が高いものもあり、その場合、通常の2倍サイズの画像を表示してあげないとボヤける等の仕様があります。 なので、以下のようにいろんな指定の仕方で記述しなければなりません。(ちゃんとやろうとすると) <picture class="imgWrapper"> <source media="(min-width:1200px)" srcset=" /images/te
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://blog.yukii.work/posts/2022-05-21-why-nuxt-speedkit-scores-so-well/
My web performance journey with Nuxt, Storyblok & Netlify
【Nuxt】nuxt-optimized-imagesで画像圧縮を自動化する