NuxtJS Nuxt3でwebsocketを使う Nuxt3のリリースを見ると、SummerからAutumnになっていましたね。リリースが待ち遠しい。。さて、Nuxt3でwebsocketを使うにはどうするかを調べていたところ、Nuxt2とは少し異なるようでした。本記事では、Nuxt3でw... 2022.10.03 byebyehaikikyou 0 NuxtJS
NuxtJS Nuxt3でExpressを使ってみる はじめにNuxt3には、nitro(+h3)というサーバエンジンが標準で備わっているため、server/apiやserver/routeディレクトリにハンドラファイルを置くだけでAPIが簡単に実装できます。しかし、馴染みのあるexpress... 2022.09.25 byebyehaikikyou 0 NuxtJS
NuxtJS Vue3 provideしたコンポーネントでinject vee-validateを見ていて、なるほどこれは参考になると思ったのでメモ。provide/injectについて、provideで提供したオブジェクトは子ノードでinjectすることで子ノード内に依存関係を持ち込むことができる。provi... 2022.09.21 byebyehaikikyou 0 NuxtJS
NuxtJS Nuxt3でvee-validate4(Composable API)を使う 引き続きNuxt3のトピックです。Vue3のUIフレームワークであるvee-validateの組み合わせでフォームのバリデーションを組んでみます。というのも、vee-validate4の使用について少しハマってしまったので、その備忘録をかね... 2022.09.18 byebyehaikikyou 0 NuxtJS
NuxtJS Nuxt3 ページごとにタイトルを変える Nuxt3でページごとにタイトルを変える方法について記述します。正式リリースされていないので変わる可能性もゼロではないですが。useHeadとtitleTemplateを使うapp.vueでtitleTemplateを使います。pagesデ... 2022.09.06 byebyehaikikyou 0 NuxtJS
NuxtJS Nuxt3でページにstyleを適用する Nuxt3でページにスタイルを指定する方法についてです。Headタグ使うSFC内に以下のように記述する事でスタイル指定が可能です。useHeadを使うComposable APIを使ってscript setupに書くこともできます。useH... 2022.08.30 byebyehaikikyou 0 NuxtJS
NuxtJS Nuxt3での簡易の認証フローを構築する Nuxt3でアクセストークンを使った簡易な認証フローの構築をしてみます。簡易な認証フローでは、route middlewareを使います。route middlewareはNuxt2にも同様にあった仕組みです。サーバーサイド(SSRサーバ初... 2022.08.15 byebyehaikikyou 0 NuxtJS
NuxtJS Nuxt3のruntimeConfigで環境変数を設定する はじめにnuxt3には、実行時に設定値をロードするための仕組みとしてruntimeConfigというものがある。コンポーネント内からはuseRuntimeConfigや$configで値にアクセスすることができる。サーバサイド(privat... 2022.07.21 byebyehaikikyou 0 NuxtJS
NuxtJS Nuxt3でtailwindcssを使う はじめにnuxt3でtailwindcss(bootstrapのようなcssフレームワーク)を使えるようにします。nuxt3は、本記事掲載時点ではバージョンrc4となっており正式リリースはされてない状況ですが、少しずつ触っていきたいと思いま... 2022.07.09 byebyehaikikyou 0 NuxtJS
NuxtJS Nuxt3をさわってみる Nuxt3はbeta版になっている、Nuxt3の雰囲気をつかむためインストールから起動するところまでやってみる。インストールnuxiという新しいCLIを使う。nuxiについて、プロジェクトのトップでinfoコマンドを実行してみる。ディレクト... 2022.02.26 byebyehaikikyou 0 NuxtJS
NuxtJS NuxtJS+socketioで認証フィルタをはさむ(passport) NuxtJSでサーバ側はexpress、websocketを使うのにsocket.ioを使っていて、ユーザー認証をpassportで行なう場合の覚書き。今回試すことaxiosを使ってサーバAPIでログインし、その後socket.ioでweb... 2021.11.17 byebyehaikikyou 0 NuxtJS
NuxtJS vuex-persistedstateによるstateデータの永続化 NuxtJSのSSRモードで、vuex-persistedstateによるデータ永続化を適用してしまいSSRのfetchライフサイクルでstoreに設定したデータが上書きされてしまった。これは、私がvuex-persistedstateの使... 2021.11.11 byebyehaikikyou 0 NuxtJS
NuxtJS Nuxt.jsでsocket.ioを使うー nuxt-socket-ioライブラリ Nuxt.jsでsocket.ioを使ったアプリケーションを作る続きです。前回、Nuxt.jsでsocket.ioライブラリを使うやり方について整理してみました。socket.ioライブラリを直接使う方法で、3つのアプローチで試してみました... 2021.10.02 byebyehaikikyou 0 NuxtJS
NuxtJS Nuxt.jsでsocket.ioを使うやり方 Nuxt.jsでWebSocket、今回はsocket.ioを使う方法についての備忘録です。他によいアプローチがあるかもしれません。他の方の事例を参考にしながら、自分なりに整理してみました。以下の3つのアプローチで記述してみます。 m... 2021.09.04 byebyehaikikyou 0 NuxtJS