Overview Sample ハマったところ Overview タイトルのとおりです。 ちゃんとアプリとかにありがちな TextArea の入力量（改行)に応じて、TextArea を拡張させる実装のサンプルを記載します。 結構ありがちな実装だと思いますが、Vue3 のサンプルが少なかった…

Overview Usecase Samples Overview Nuxt3 を使って Custom Navigation を実装します。 大まか内容は公式の Pages の https://nuxt.com/docs/guide/directory-structure/pages/#navigation の部分に記載されてる内容です。 Usecase 以下のような Tab の UI …

Overview ハマったところ Data を Refresh するときには関数型で書く Overview Nuxt3 で DataFetching を行う方法について記載します。 大まかには以下のドキュメントに記載されているとおりですが、一部ハマったところがあったので備忘録として追記します。…

Overview 以下のエントリの内容を書くきっかけになった RC のアップデートのタイミングで firebase-functions のバージョンを最新にしたときに、rewrites に存在していた存在しない functions の directory を指定してしまうと 403 Fobidden になりました。 …

Overview タイトルの通りなのですが、いつからか、 Nuxt3 の設定の nuxt.config.js で nitro:false && ssr: false の場合は firebase 向けのビルドをするときに必要だった NITRO_PRESET=firebase が必要なくなっていました。 考えると当たり前で SPA モード…

Overview Refreshing Data Pending SearchParams まとめ Overview Nuxt3 の useFetch API を実際に使ってみたので使った範囲での機能についてまとめます。 useFetch の詳細は以下の Nuxt3 のドキュメントに書いてある通りです。 v3.nuxtjs.org ざっくりいう…

Overview Nuxt3 の RC8 を使おうとした際に Cannot start nuxt: nuxtCtx.tryUse is not a function というエラーに当たったのでその解消方法についてのメモです。 対処方法 以下の issue に書いてあるがこのエラーの原因は rc6 -> rc7 において互換性がなく…

Nuxt3 と Tailwind CSS を使っているときに下記のドキュメント通りに Tailwind CSS を設定すると Importing directly from a nuxt.config file is not allowed. というエラーが発生する。 tailwindcss.com これは nuxt の設定ファイルを tailwind を適用する…

Overview Context SSG やってみた 余談 Functions deploy がこける問題 lint と build が predeploy で強制的にかかってしまう Overview ※ 筆者がたまたま Nuxt3 を弄っていて気づいた話なので最新の動向は GitHub の Discussion を追ってください。 github.…

Overview 導入方法 Install dependencies Setup Plugin How to use まとめ 余談 Nuxt3 の rc がなかなか上がらなかったのは vue-jest 依存のせいだった。 See Also Overview 少し前にポートフォリオサイトを Nuxt2 -> Nuxt3 にアップデートしましたが、この…

Overview Nuxt のアプリケーションにおいて HTML の head タグを編集する方法を記載します。 config ファイルで head タグを編集する nuxt.config.js の head property を更新します。 デフォルトで生成される設定ファイルは以下です。 { head: { title: pro…

Overview Nuxt と Firebase Hosting を使ってサイトを公開したのでその記録について記載します。 Install Nuxt 公式のインストール手順 に則って進めます。 npx create-nuxt-app emahiro.dev 今回自分は以下のような設定にしました。 create-nuxt-app v2.12.…

はじめに 気になっていたNuxtを触ってみました。 軽く触れて、ドキュメントを読んだだけでしたが今回は簡単なtodoアプリの作成をしてみます。 Nuxtは日本語のドキュメントがとても充実していて インストール - Nuxt.js を見ればほぼ誰でもNuxtを簡単に始める…