skysan's programming notebook

コーディングして思ったことなどを気ままに

Nuxt.js

Nuxt3アプリ内でページ遷移時に履歴を作らない方法

Nuxt3アプリ(PWA)でページ遷移時にブラウザの履歴を残したくないので調べた。 JavaScript nagigateToメソッドのreplaceオプションを設定する。 navigateTo('/home', { replace: true }) navigateTo · Nuxt Utils HTML要素 RouterLinkもしくはNuxtLinkのrepla…

Nuxt3のビルド時に `Rollup failed to resolve import "vue"` が起きたら

事象 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@1…

fontawesomeのアニメーションが動かない

はじめに fontawesomeのSpinnerアイコンに回転アニメーションを設定したが、動かない。 MacbookのChromeでは動かないが、iOSのSafariで動いていたので、調査した。

Editor.jsとTailwindCSSのスタイルの干渉を解消する

はじめに Nuxt.js + TailwindCSSで作成したアプリにEditor.jsを組み込もうとしたところ、headerプラグインがうまく動かなかった。 原因と解決策を検討する。

Nuxt3(RC)アプリをElectronで表示する

はじめに Nuxt3の勉強がてら、electronアプリで表示するための設定を調べた。 オフラインのデスクトップアプリで使うので、CSR(Client-Side-Rendering)でしてみた。 留意事項 2022/7/18時点では、Static Hosting(静的ホスティング)はまだ試験段階。 This fea…

Nuxt.js + Electronの環境構築(Monorepo風)

はじめに Web(Nuxt.js)側のコードを独立して動かせる環境構築 mainプロセスとrendererプロセス間の通信方法を検証 成果物 https://github.com/skysan87/nuxt-electron-sample 目次 はじめに 成果物 目次 プロジェクトの作成 ディレクトリ構成 作成手順 1. Nu…

続々・モーダルなコンポーネントのフォーカス管理(Nuxt.js版 2)

前回の反省 カスタムディレクティブで作ってみたが、ダイアログが埋め込んであるページに遷移する度にfocusinイベント登録が発生してしまう。 skysan87.hatenablog.com 今回やりたいこと カスタムディレクティブをやめる。 以下のサイトを参考にダイアログを…

続・モーダルなコンポーネントのフォーカス管理(Nuxt.js版)

やりたいこと Nuxt.jsでもVue.js同じようなフォーカス管理をしたい。 skysan87.hatenablog.com 背景 Vue.jsで作ったものを利用しようとすると以下のエラーが出てしまい、うまくいかない。 document undefined 公式の回避方法もうまくいかない。 解決策 カス…