ITの隊長のブログ

ITの隊長のブログです。Rubyを使って仕事しています。最近も色々やっているお(^ω^ = ^ω^)

Nuxt

Nuxt3のcreate-nuxt-appでカレントディレクトリにプロジェクト作りたい場合

概要 gitリポジトリを先に作ると、ネストしてプロジェクトが作成されるので嫌だった なんかないかなって下記眺めてたらいけそうだったので試した github.com コマンド $ yarn create nuxt-app . --overwrite-dir --overwrite-dir とプロジェクト名をいれると…

Cannot use import statement outside a module

import * as scatter from 'scatter-gl' ↑のように該当 モジュールをimportすると下記エラー [nuxt] [request error] [unhandled] [500] Cannot use import statement outside a module at Object.compileFunction (node:vm:352:18) at wrapSafe (node:inter…

Component inside <Transition> renders non-element root node that cannot be animated.

Nuxt3でwarningがでてたので、対応してみた。 www.memory-lovers.blog マルチルートノードコンポーネントがサポートされたけど、直下はダメらしい。。 なるほど〜〜 というわけで、記事と同様に単一要素に修正したところ消えた。よかった

Nuxt3.0.0-rc.11が動かない

結論からいうと、Nuxt3.0.0-rc.10で動きました。 環境 $ sw_vers ProductName: macOS ProductVersion: 12.6 BuildVersion: 21G115 $ docker --version Docker version 20.10.17, build 100c701 m1 macです(m2でも試しました) 試したこと だいたいはドキュ…

Nuxtでの実装について

フロントエンドの実装がなんもわからん状態になっていました ぼくはReactを触ったことがないので、あくまでVueしか語れないですが(正直Vueもそんな語れる気がしない)、もともとjQueryでSPA開発をしたことがある僕が、Component志向なフレームワークを触っ…

Nuxt2でViteを使う

ビルドが速いらしいので使ってみた vite.nuxtjs.org この記事参考にした(インストールはこれで大丈夫) zenn.dev ローカルにいれてれば特に問題ないと思うが、ぼくはDockerを使ってたので謎の挙動が発生した(Nuxtアプリをブラウザで開くとhot reloadの無限…

vueのcomposition apiを理解したい

正確にはNuxt(v2)ですが zenn.dev こちらの記事参考にして進めています。 github.com 進捗がこちら↑(○ロ注意) まだ完全に理解はできていないので雰囲気だけですが、componentとロジックをめっちゃ分離できた感じがある。文章読むだけでは全くわからなかっ…

PWAをひたすら調べまくるログ

なんもわからん speakerdeck.com speakerdeck.com knowledge.sakura.ad.jp www.youtube.com qiita.com techblog.kayac.com favorite-pwa.com

Nuxtのbase urlを変更したい

デフォルト / なんですが、proxyでサブディレクトリにマッチさせて、nuxtへリクエストしたい時、トップページは表示されるんですが、バンドルされたapp.jsとかはルートディレクトリでリクエストされるので、真っ白のままの状態になる。 というわけで修正しま…

nuxt authモジュールのcookie schemaとcookieのHttpOnly属性は相性が悪いらしい

nuxt authモジュールでマルチログインを対応したくて色々試行錯誤しているところです。 www.aipacommander.com で、バックエンド側でcookieの名前を変更できるようにする&セッションストレージを2つ用意できるようにしたところで、nuxt側でどうやって1つめ…

nuxt/authで謎のエラー

こんなエラーがでました。 ╭───────────────────────────────────────────────────╮ │ │ │ ✖ Nuxt Fatal Error │ │ │ │ Error: Cannot resolve "user" from "/app/user" │ │ │ ╰───────────────────────────────────────────────────╯ 摩訶不思議だったんで…

SPAの戻るボタンとブラウザの戻るボタンをあわせる

Nuxtでページを移動するとき、下記のようにします。 this.$router.push({path: '/about'}) で、移動したのちの戻り方ですが、History APIを利用します。 window.history.back() // または // window.history.go(-1) これでおk. また、URLは変えたいけど、…

NuxtでのVuexなんもわからん

VueだけのVuex使ったときにはなんとなくで使ってたのでできると思ったけど、今回改めてやってみたらなんもわからん。 とりあえず記事だけペタペタ貼り付ける。 階層が違うStoreを扱うときの参考URL qiita.com axios使ってStoreに突っ込むときの参考URL qiita…

Nuxtでmultiple authを行う

なんらかmoduleを入れないといけないと思ったけどいけるのかすごい! auth.nuxtjs.org すばーらーしーいー nuxt.config.js を下記のように修正する。 strategies: { local: false, user: { scheme: 'cookie', // ... 省略 }, admin_user: { scheme: 'cookie'…

Dockerコンテナ上でNuxt.jsのデバッグをVSCodeで行う

これの続き www.aipacommander.com VSCodeからデバッグアイコン叩くまではできたけど、起動したchromeがぐるぐるしたままNuxt初期画面を表示してくれないし、breakpointでも止まってくれないで困っている。 zenn.dev qiita.com snyt45.com 明日はできるとい…

Dockerコンテナ上でNuxt.jsのデバッグをVSCodeで行う

できるかなーと試している。 qiita.com ↑の手順で環境構築したがエラーがでたので下記を追加して修正。 github.com package.json "scripts": { "dev": "NODE_OPTIONS=--openssl-legacy-provider nuxt", "build": "NODE_OPTIONS=--openssl-legacy-provider nu…

nuxt-authのfetchUserの返り値が空じゃないと$auth.loggedInがtrueになる

自分用のメモ(もし詳細気になる人いたらコメントください→Qiitaにちゃんとまとめるかも) 年末あたりからNuxtを触っているのですが、いまいちよくわからずなんと認証で死んでいます。 ドキュメント等を穴が開くまで見たりしているのですが、まだなれていな…