NuxtJS

スポンサーリンク
NuxtJS

Nuxt3でwebsocketを使う

Nuxt3のリリースを見ると、SummerからAutumnになっていましたね。リリースが待ち遠しい。。さて、Nuxt3でwebsocketを使うにはどうするかを調べていたところ、Nuxt2とは少し異なるようでした。本記事では、Nuxt3でw...
0
NuxtJS

Nuxt3でExpressを使ってみる

はじめにNuxt3には、nitro(+h3)というサーバエンジンが標準で備わっているため、server/apiやserver/routeディレクトリにハンドラファイルを置くだけでAPIが簡単に実装できます。しかし、馴染みのあるexpress...
0
NuxtJS

Vue3 provideしたコンポーネントでinject

vee-validateを見ていて、なるほどこれは参考になると思ったのでメモ。provide/injectについて、provideで提供したオブジェクトは子ノードでinjectすることで子ノード内に依存関係を持ち込むことができる。provi...
0
NuxtJS

Nuxt3でvee-validate4(Composable API)を使う

引き続きNuxt3のトピックです。Vue3のUIフレームワークであるvee-validateの組み合わせでフォームのバリデーションを組んでみます。というのも、vee-validate4の使用について少しハマってしまったので、その備忘録をかね...
0
NuxtJS

Nuxt3 ページごとにタイトルを変える

Nuxt3でページごとにタイトルを変える方法について記述します。正式リリースされていないので変わる可能性もゼロではないですが。useHeadとtitleTemplateを使うapp.vueでtitleTemplateを使います。pagesデ...
0
NuxtJS

Nuxt3でページにstyleを適用する

Nuxt3でページにスタイルを指定する方法についてです。Headタグ使うSFC内に以下のように記述する事でスタイル指定が可能です。useHeadを使うComposable APIを使ってscript setupに書くこともできます。useH...
0
NuxtJS

Nuxt3での簡易の認証フローを構築する

Nuxt3でアクセストークンを使った簡易な認証フローの構築をしてみます。簡易な認証フローでは、route middlewareを使います。route middlewareはNuxt2にも同様にあった仕組みです。サーバーサイド(SSRサーバ初...
0
NuxtJS

Nuxt3のruntimeConfigで環境変数を設定する

はじめにnuxt3には、実行時に設定値をロードするための仕組みとしてruntimeConfigというものがある。コンポーネント内からはuseRuntimeConfigや$configで値にアクセスすることができる。サーバサイド(privat...
0
NuxtJS

Nuxt3でtailwindcssを使う

はじめにnuxt3でtailwindcss(bootstrapのようなcssフレームワーク)を使えるようにします。nuxt3は、本記事掲載時点ではバージョンrc4となっており正式リリースはされてない状況ですが、少しずつ触っていきたいと思いま...
0
NuxtJS

Nuxt3をさわってみる

Nuxt3はbeta版になっている、Nuxt3の雰囲気をつかむためインストールから起動するところまでやってみる。インストールnuxiという新しいCLIを使う。nuxiについて、プロジェクトのトップでinfoコマンドを実行してみる。ディレクト...
0
NuxtJS

NuxtJS+socketioで認証フィルタをはさむ(passport)

NuxtJSでサーバ側はexpress、websocketを使うのにsocket.ioを使っていて、ユーザー認証をpassportで行なう場合の覚書き。今回試すことaxiosを使ってサーバAPIでログインし、その後socket.ioでweb...
0
NuxtJS

vuex-persistedstateによるstateデータの永続化

NuxtJSのSSRモードで、vuex-persistedstateによるデータ永続化を適用してしまいSSRのfetchライフサイクルでstoreに設定したデータが上書きされてしまった。これは、私がvuex-persistedstateの使...
0
NuxtJS

Nuxt.jsでsocket.ioを使うー nuxt-socket-ioライブラリ

Nuxt.jsでsocket.ioを使ったアプリケーションを作る続きです。前回、Nuxt.jsでsocket.ioライブラリを使うやり方について整理してみました。socket.ioライブラリを直接使う方法で、3つのアプローチで試してみました...
0
NuxtJS

Nuxt.jsでsocket.ioを使うやり方

Nuxt.jsでWebSocket、今回はsocket.ioを使う方法についての備忘録です。他によいアプローチがあるかもしれません。他の方の事例を参考にしながら、自分なりに整理してみました。以下の3つのアプローチで記述してみます。 m...
0
スポンサーリンク