くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

Nuxt3

TypeScript ServerのエラーでNuxtが起動できなくなった(verbatimModuleSyntax)

ある日突然、なにもしてないのに壊れた。。 pnpm devで起動してみると、こんなエラーが。。 $ pnpm dev ERROR EISDIR: illegal operation on a directory, read <directory_path> ERROR Internal server error: EISDIR: illegal operation on a directory, read <directory_path> バージョン</directory_path></directory_path>…

Nuxt2+BuefyからNuxt3+Nuxt UIに移行してみた

この記事はNuxt Advent Calendar 2023の 1日目の記事です。 12月1日で2周年を迎えることができた、 GoogleスプレッドシートのJSON API化サービス 「SSSAPI」 sssapi.app Nuxtをつかって開発をしていますが、 その少し前の11月にNuxt3に移行完了しました Nuxt…

SPAなNuxt3で初期読み込み時のローディングを表示する

Nuxt3でSPA(ssr: false)時に真っ白な画面が表示されるけれど、 Nuxt2みたいにローディングを表示したいなといろいろ調べたときの備忘録(*´ω`*) Nuxt3.6以降で対応されたっぽい。 Nuxt 3.6 · Nuxt Blog spaLoadingTemplate | Nuxt Configuration Nuxt2時代 N…

カラーピッカーにvue3-swatchesを試してみる

Nuxt3へのリプレイスというか作り替えを進めているけど、 カラーピッカーとして使っていたvue-swatchesが、 メンテナンスされておらず、Vue2で止まってるようだった。。 www.memory-lovers.blog いろいろ見ていると、別の人がVue3版を公開してくれてたので、…

Bun workspace+Turborepo+Nuxt3を試してみる(GCP/Firebaseとかも)

TurborepoでもBun.shが対応されたっぽいので、 BunのqorkspaceでNuxt3を試してみたときに備忘録(*´ω`*) Turborepo now has beta support for Bun.◆ Run `bun i -g turbo@latest`◆ Run `bunx create-turbo@latest`If you have previously installed `turbo` …

Nuxt Studioにあるドキュメントサイトの3つテーマをのぞいてみる(Apline/Docus/Content Wind)

Explore themes · Nuxt Studioに掲載されている ドキュメントサイトを作るテーマが3つあったので、 少しみてみたときの備忘録(*´ω`*) nuxt-themes/alpine: The minimalist blog theme, powered by Nuxt & Markdown. nuxt-themes/docus: Write beautiful doc…

Nuxt3のモジュールを作るために、Module Author Guideをみてみた

Nuxt3のモジュールを作りたくなり、 いろいろ調べてみたときの備忘録(*´ω`*) 公式サイトのドキュメントを見ながら Module Author Guide · Nuxt Advanced テンプレートから作成 # テンプレートからmy-moduleディレクトリを作成 $ npx nuxi init -t module my…

Nitro Serverに入門してみたら、Nuxt3の理解が深まった

この記事をみて、Nitro サーバに興味が出たので、 ドキュメントみながら、少し触ってみたときの備忘録(*´ω`*) Nitro + TypeScript で作る軽量APIサーバ - Qiita 全てをdevDependenciesにするよ。具体的には、ビルド後の資材が必要最低限のもので.outputディ…

monorepoでもGitHub Actions+OIDCでNuxtをCloud Runにデプロイしたい

前回の続き(*´ω`*) pnpm x Turborepoでつくったmonorepo構成で、 ソースからデプロイしようと思ったら、ハマったときにの備忘録(*´ω`*) pnpm x Turborepo x lerna-lite x GitHub Packagesでmonorepoなオレオレ非公開ライブラリをつくってみる - くらげにな…

Nuxt3でpages配下の特定ディレクトリをルートから除外する(`pages:extend` hook)

Next.js関連のこのツイートを見て、 Nuxtでもやりたいなと思ったときにいろいろ調べてみたときの備忘録(*´ω`*) 最近、ディレクトリをカスタマイズするのが便利なのでは? と思っていろいろ試行錯誤中(*´ω`*) components のディレクトリ構成のベストは?Nex…

Nuxt3で設定値をあつかう3つの方法(runtimeConfig/.env/app.config.ts)

Nuxt3でAPIのURLなどの設定値についてみていたら、 実はruntimeConfig以外にもいろいろあったので調べてみたときの備忘録(*´ω`*) nuxt.config.tsのruntimeConfig いつものやつ。Nuxt3からはcomposablesが提供され、 型推論が効くようになっている。 // nuxt…

Nuxt3のビルド時にconsoleを削除する(esbuildのpure/drop)

本番向けのビルドのときに、console.logとかを削除したいなと思ったとき、 いろいろ調べたときの備忘録(*´ω`*) esbuildの設定で削除できるっぽい(*´ω`*) 設定 pureとdropの2つがある。 // nuxt.config.ts // https://v3.nuxtjs.org/api/configuration/nuxt…

セキュリティを無効化したChromeをMacOSで立ち上げる(CORS問題の回避)

Nuxt3+Firebase Local Emulator Suiteで開発してると、 Firebase FunctionsのCallable関数でCORSエラーが。。 (Nuxt2のころだと問題なかった気がするけど、) いろいろ試してみたけど、うまく行かなかったので、 開発中はセキュリティを無効化したChromeで動…

Nuxt3でFirebase Auth v9を使ってみる

Nuxt3&Firebase Auth v9を試してみたときの備忘録。 Nuxt2&Firebase Auth v8とは結構違うので、びっくりする(*´ω`*) まずはインストール $ npm i firebase プラグインでFirebaseの初期化 Firebaseの初期化はプラグインでおこなう。 .clientサフィックスで、…

Nuxt3でvue3-notificationをつかって通知する

BuefyからTailwind CSSに移行してるけど、 通知を自前で作る必要があるので、いろいろ試してみたときの備忘録。 通知関連のVueコンポーネントはいくつかあるけど、 Vue3対応でメンテナンスされているvue3-notificationを利用 使い方 まずはインストール $ np…

yupのエラーメッセージを日本語化する

Vee-Validate v4を試したときに、 validationルールでYupを利用したけど、 メッセージが英語だったので、日本語化してみたときの備忘録。 www.memory-lovers.blog pocka/yup-locale-jaを使えばOKだった(*´ω`*) 使い方 まずはインストール $ npm i yup yup-l…

Vue3ではrootに複数の要素OKだけどNuxt3のpage配下は単一要素がいい

Vue3ではFragmentsが導入されて、マルチルートノードコンポーネントがサポートされた。 ・Fragments | Vue.js 以下のようなのも対応しているけど、 <template> <button class="btn mx-2">ボタン1</button> <button class="btn btn-primary mx-2">ボタン2</button> </template> Nuxt3のpagesだと、warningが出てしまう。。 runtime-core.esm-bundler.js:38 [Vue warn…

Nuxt3/Vue3: Composition APIでのテンプレート参照(`$refs`)

Nuxt3で$refsを使うと思ったら、うまくいかなかった。。 Composition APIで$refsは使えないらしい。。 Composition APIでのテンプレート参照したいときは、 refと同じ変数をRefを使って用意すればよいらしい。 テンプレート参照 | Vue.js <script setup> const myCoolDiv =</script>…

Nuxt3でvue pluginを適用する

Nuxt3になってvueのプラグインを使う形もちょっと変わった。 ドキュメントだとこのあたり。 Nuxt 3 - Plugins directory 使い方 公式ドキュメントのサンプルより。 yarn add --dev vue-gtag-next // plugins/vue-gtag.client.js import VueGtag from 'vue-gt…

Nuxt3のComposablesとuseStateと状態管理

Nuxt3をいろいろ試していたときの備忘録。 Vuexが含まれなくなり、ComposablesやuseStateの登場で、 大きく変わっている印象。 composablesディレクトリとは? auto-importしてくれるディレクトリのひとつ Nuxt 3 - Composables directory Composablesな関数…

Nuxt3でSFCのsetup(Reactivity API/Composition API)

Vue3で登場したComposition APIがNuxt3のデフォルトっぽい。 ただだいぶ書き方が変わったのでそのあたりを調べたときの備忘録。 なぜComposition APIなのか? | Vue.js Vue2からある書き方は、Options API。 <script setup>構文 新しく増えた<script setup>はこんな感じ。 SFC内でComposi…

Nuxt3でaxiosはなくなり、Fetch APIをつかうらしい

Nuxt3でAPIを呼び出したいなと思ったら、axiosを使わなくなったらしい。 Nuxt 2 to Nuxt 3: Component Options 今後はFetch APIか、unjs/ohmyfetchの$fetchを使う形になる。 axiosの場合、開発中などでCORS問題があったりして、 axios-proxyが必要だったけど…