Nuxt3アプリ(PWA)でページ遷移時にブラウザの履歴を残したくないので調べた。
JavaScript
nagigateTo
メソッドのreplace
オプションを設定する。
navigateTo('/home', { replace: true })
HTML要素
RouterLink
もしくはNuxtLink
のreplace属性を設定する。
<RouterLink :to="/home" replace> </RouterLink>
Nuxt3アプリ(PWA)でページ遷移時にブラウザの履歴を残したくないので調べた。
nagigateTo
メソッドのreplace
オプションを設定する。
navigateTo('/home', { replace: true })
RouterLink
もしくはNuxtLink
のreplace属性を設定する。
<RouterLink :to="/home" replace> </RouterLink>
Nuxt3アプリ(Static-Hosting)で ビルド時(nuxt build
)にエラーが発生。
尚、nuxt dev
では発生しなかった。
$ pnpm nuxt build [vite]: Rollup failed to resolve import "vue" from "(プロジェクトルート)/node_modules/.pnpm/nuxt@3.4.3_@types+node@18.0.0_typescript@5.3.3/node_modules/nuxt/dist/app/entry.js". build.rollupOptions.external at viteWarn ((プロジェクトルート)/node_modules/.pnpm/vite@4.3.5_@types+node@18.0.0/node_modules/vite/dist/node/chunks/dep-934dbc7c.js:46561:23) at onRollupWarning ((プロジェクトルート)/node_modules/.pnpm/vite@4.3.5_@types+node@18.0.0/node_modules/vite/dist/node/chunks/dep-934dbc7c.js:46585:9) at onwarn ((プロジェクトルート)/node_modules/.pnpm/vite@4.3.5_@types+node@18.0.0/node_modules/vite/dist/node/chunks/dep-934dbc7c.js:46332:13) at Object.onwarn ((プロジェクトルート)/node_modules/.pnpm/rollup@3.21.5/node_modules/rollup/dist/es/shared/node-entry.js:25305:13) at ModuleLoader.handleInvalidResolvedId ((プロジェクトルート)/node_modules/.pnpm/rollup@3.21.5/node_modules/rollup/dist/es/shared/node-entry.js:23940:26) at (プロジェクトルート)/node_modules/.pnpm/rollup@3.21.5/node_modules/rollup/dist/es/shared/node-entry.js:23900:26
pnpm install --shamefully-hoist
でインストールし直す。
ただし、非常に非推奨
*1。
$ pnpm install --shamefully-hoist ✔ The modules directory at "(プロジェクトルート)/node_modules" will be removed and reinstalled from scratch. Proceed? (Y/n) · true
.npmrcに以下の設定を追加し、再度pnpm install
するとビルドに成功した。
また、node_moduleフォルダはすべてもモジュールから削除した。
正直pnpm install --shamefully-hoist
と同じだと思うが、設定がコードに記述されているかどうかの違いだと思われる(確証なし)。
# .npmrc shamefully-hoist=true
GoogleのAI Bard
に聞いてみた。
(一部抜粋) エラーメッセージから、Nuxt のビルド時に vue モジュールが外部化されていないことが原因であると分かります。 vue モジュールは、Nuxt の動作に必須のモジュールです。これを外部化すると、Nuxt の動作に問題が生じてしまう可能性があります。 このエラーを解決するには、vue モジュールを外部化しない方法をとるか、外部化する場合でも、明示的に build.rollupOptions.external に追加する必要があります。
nuxt build
でエラーになったモジュールをnuxt.config.tsのbuild.rollupOptions.external
に設定する。
→ビルドはできるが、vue自体が外部化され参照エラーでアプリ起動に失敗する。
export default defineNuxtConfig({ // 追加した設定のみ記載 vite: { build: { rollupOptions: { external: [ 'vue', 'vue-router' ] } } } })
Volta + pnpm環境でnode.jsのバージョンがグローバルとプロジェクトで異なる開発環境を構築している。
pnpm install コマンドを実行した際に、グローバルのバージョンの方が優先されてしまうので、指定したNode.jsバージョンで実行する方法を調査した。
続きを読むこれまでモーダルを表示したときのTABによるフォーカス移動でバックグラウンドに移動するのを防ぐための実装をしてきた。この方法は「フォーカストラップ」と呼ぶらしい。*1
注釈のサイトにユーザビリティやスクリーンリーダによるTAB移動問題の指摘もあったので、今後はこの実装をやめる。
また、最近dialog
要素を知り簡単に実装できたので記事にした。
モーダルなコンポーネントのフォーカス管理 - my coding note
続・モーダルなコンポーネントのフォーカス管理(Nuxt.js版) - my coding note
続々・モーダルなコンポーネントのフォーカス管理(Nuxt.js版 2) - my coding note
続きを読むTypeScriptのpaths
設定で@/folder
のようにパスを指定した。
テストファイルでもmoduleのimportを@
でパスを設定して、絶対パスで呼び出したい。
// test/Util/DateUtil.test.ts import { dateFactory } from '@/Util/DateUtil'
しかし、そのままテストを実行(例:pnpm test
)すると、Cannot find module '@/Util/DateUtil' from 'test/Util/DateUtil.test.ts'
となる。
先人の情報に感謝しつつ、ここに解決方法を記載する。
続きを読む