ある日突然、なにもしてないのに壊れた。。 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>…

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

追記) v3.0.0-rc2以降 記事を書いたら、対応されていることを教えてもらえた(*´ω｀*)ｱﾘｶﾞﾀｲ bridge でも一部definePageMeta 使えます！(nuxt.config に設定が必要なんですがドキュメントに書かれてないのでPRを参考にしていただければと )https://t.co/0Y5Ns…

Nuxt BridgeのアプリにNuxt Tailwindを入れようとしたら、 Bridgeはサポートされてないっぽかった。。 なので、Tailwindを追加できるようにしたときの備忘録(*´ω｀*) インストール Tailwind側のドキュメントを参考にインストール Install Tailwind CSS with …

かなり古いNuxtアプリにNuxt Bridgeを入れようとしたら、 かなりはまったので、いろいろ調べたときの備忘録(*´ω｀*) 昔の環境 Nuxt v2.15(webpack4) Node v14 Buefy node-sass v5.0.0 sass-loader v10.1.0 Nuxt2はwebpack4に依存。 sass-loaderのv11以降は、…

はじめて丸一日あるカンファレンスに参加したけど、 すごく刺激を受けて、いろいろ考える切っ掛けになったので、その備忘録(*´ω｀*) vuefes.jp とりあえず、オープニングムービーから素敵で、 「これが、カンファレンスってやつか。。」と感動してた(*´ω｀*)…

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` …

Pinceauを少しさわってみた Nuxt ThemesやDoucsで利用されているPinceau。 Docusをカスタマイズするために、もう少しちゃんと理解しようと、 少し触ってみたときの備忘録(´ω｀) Hello · Pinceau Pinceau デザイントークンのライブラリ。 こんな感じでtokens.…

Nuxtでできてるドキュメントサイト用のテーマの、 Docusがよさそうなのでいろいろ試したときの備忘録(*´ω｀*) Docus | Write pages in Markdown, use Vue components and enjoy the power of Nuxt. 使われているNuxtモジュール 以下のモジュールをベースとし…

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

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

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

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

Nuxt3への移行の前段階として、Vue2.7にする方法を調べたときの備忘録(*´ω｀*) 以前はnuxt-edgeを使ってたけど、いつのまにかNuxt2.16が出てた(*´ω｀*) Release v2.16.2 · nuxt/nuxt Vue2.7について Vue3で追加された機能のいくつかが使える様になっている。…

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

Nuxt2のプロジェクトのNuxt3化をしてる途中。 nuxt-modules/iconが使いたいけど、 Nuxt2には対応していないよう。。 とりあえず、Nuxt2でIconifyを使える用意して、 Buefyのb-iconを置き換えれるようにしたときの備忘録。 iconifyの導入 Iconify for Vue 2 I…

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

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

Vee-Validate3を使ってたけど、Vue3を利用しているので、 Vue3対応版のVee-Validate4を試してみたときに備忘録。 かなり変わっているので、びっくりする(*´ω｀*) 主な変更点 ValidationProviderなどで囲わなくなり、 Form、Fieldなどのコンポーネントが提供…

Tailwindでは、カスタムCSSを@applyやlg:などでも使えるように、 @layer utilitiesなどを使って設定が必要。 @tailwind base; @tailwind components; @tailwind utilities; @layer components { .select2-dropdown { @apply rounded-b-lg shadow-md; } } @la…

Nuxt2+Buefyで開発していたけど、BuefyがVue3をサポートしないっぽい。。 なので、移行先としてTailsind CSSを考えている。 いきなり全部の移行は難しいので、BuefyとTailwind3が同居できる環境を整える。 Nuxt3では試してみたけど、Nuxt2+Buefyだとちょっと…

一部のページはNuxt Contentを使っているけど、 GitHub Actionsでデプロイするようにしたら、作成日などがデプロイした日時になってるよう。。 ファイルの日時を見ているので、チェックアウトした日時になってしまうらしい。。 いろいろ調べてみると、Gitの…

一部のアニメーションでLottieを使っているけど、 軽量版があるっぽいので試してみた(*´ω｀*) もとのコンポーネントはこの記事のやつ。 www.memory-lovers.blog 軽量版を利用したコンポーネント <template> <div :style="style" ref="LottieView" /> </template> <script lang="ts"> - import lottie, { AnimationItem } from "lottie-web"; …

ページ内の移動には、vue-scrolltoを使ってたけど、 vue-routerだけでもいけそうだったのでためしてみた(*´ω｀*) ちなみに、Nuxt2での設定。 簡単な使い方 nuxt.config.tsのrouter.scrollBehaviorに設定を加えると、 いろいろ振る舞いを変えれるらしい(*´ω｀…

Nuxt2のSSGで静的サイトを作っているけど、 一部のコンポーネントが非同期に読み込まれてるっぽい感じに。。 調べてみると、named slotsを使っていると、 Hydrationがうまく行かず、クライアントサイドでレンダリングされるよう。。 使ってたコード 以下のよ…

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

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

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

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