NuxtJS

スポンサーリンク
NuxtJS

Nuxt3でページ遷移時にページトップにスクロールする

Nuxt3でページ遷移時にページトップにスクロールさせる方法についてです。 ふと、rc.13版にアップグレードしてみるとスクロールトップのオプションが入っているようでした。Transitionのfinishのタイミングでページトップにスク...
0
NuxtJS

Nuxt3でのビルド後の環境変数の適用(node-server)

Nuxt3にはdotenvが組み込まれていて、プロジェクトトップにある.envファイルを読み込み環境変数として使用することができます。 devモード時は気にしませんが、ビルド後に例えばnode-serverで実行するような場合、利用者側...
0
NuxtJS

ComposableでComponentを返す方法でUnityのWebGLをコンポーネント化する

Composableの中でComponentを返せたらと考えていたところ、まさにそのアプローチがあった!と感動したので、その方法を採用してUnityのWebGLを返すComposableを作成してみました。 環境 VueUseの利用 Vu...
0
NuxtJS

Nuxt3でwebsocketを使う

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

Nuxt3でExpressを使ってみる

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

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

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

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

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

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

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

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

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

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

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

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

はじめに nuxt3には、実行時に設定値をロードするための仕組みとしてruntimeConfigというものがある。コンポーネント内からはuseRuntimeConfigや$configで値にアクセスすることができる。サーバサイド(pr...
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で...
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つのアプローチで記述してみます。 ...
0
NuxtJS

NuxtJS – 自作のmoduleを作成する

はじめに UI/UXの設計やプロトタイプ作成してイメージを具現化し仮説検証していくプロセスを効率的に回せるようになりたいという目的でフロントエンドを触り出してから、NuxtJSを学んでいます。 今回は、NuxtJSでの自作したライブラリ...
0
スポンサーリンク
タイトルとURLをコピーしました