Nuxt.jsのSSR・SPA時のフロント側の認証ビューを自前で実装する
こんにちはjunです。webアプリを作成する時は大体、認証機能をつけることが多いです。LaravelやDjangoなどでは一発で行けますが、Nuxt.js、Vue.jsを使用したSPA、Node.jsでのSSRコンテンツを作成する場合は一捻り必要です。 Nuxt.jsなどで作成するアプリはバックエンドと独立し、都度バックエンドへのAPI通信の際にトークンを渡したりすることで認証が必要なAPIへアクセスしています。 ビュー側の処理でも ログインしているユーザーはこのように表示 このルートはログインしているユーザーのみアクセス可能 未ログインユーザーはログイン画面移動 といった処理が行われることが多いです。この記事では上記のような認証を用いたビューの表現、ルーターの設定をNuxt.jsでどう行うかの解説をしたいと思います。SPA（クライアントサイドレンダリング）とSSR（サーバーサイドレンダリ
Nuxt3 の新しい機能いろいろ
Nuxt3 の新しい機能いろいろ 2021.12.11 現在 Nuxt.js は バージョン3がパブリックベータ版として提供されています。 Nuxt.js が 2 → 3 に移行するにあたってたくさんの新機能が追加されました。 現在 Nuxt.js はバージョン 3 がパブリックベータ版として提供されています。 Nuxt.js が 2 → 3 に移行するにあたってたくさんの新機能が追加されました。 パフォーマンスの向上 Nitro engine Composition API Vite Vue 3 Webpack 5 Nuxt CLI TypeScript のネイティブサポート ESM サポート Nuxt devtool（まだ） and more... 上記以外にも新たに追加された機能はどれも興味深いものばかりで今すぐにも使いたいものが揃っています。Nuxt3 で追加された新機能を体験して
SPAのページをGAで計測？従来のWEBと同じで余裕でしょ！と思い込んでた話 - Qiita
SPAをGA4、UAの両方で計測できるようにしたい！ WEB計測で利用されている超有名なツールといえば「Google Analytics」。（以下、GA） 計測タグを読み込ませるだけで、PV数やユーザー数、セッションなど多くの指標を計測できるこの便利なツールをGoogleは無料で提供しています。Googleさん、太っ腹！ 普段、私が数値集計に使っているGAはUniversal Analytics（以下、UA）形式ですが、Google公式から「2023年7月からGA4に完全移行するよ。今後、UAは使えなくなるよ」と告知されたので、GA4とUAの画面を見比べたりUAで計測できている数値をGA4で確認する方法を探したりと、手探りで移行準備を進めています。 GA4に早く慣れないとなぁと考えながら普段の業務をこなしているところに、Nuxt.js、Node.jsを使ったSPA（シングルページアプリケー
[和訳] Nuxt3 公式サイト~useRouter
この記事について この記事はNuxt3 公式サイト useRouter を和訳したものになります（日本語が不自然になってしまっている箇所があるのはごめんなさい）。 useRouter useRouter コンポーザブルはルーターインスタンスを返すので、セットアップ関数、プラグイン、ルートモジュールの中で呼び出す必要があります。 Vue コンポーネントのテンプレートの中では、代わりに $route を使用してルーターにアクセスできます。 pages/ フォルダがある場合、useRouter は vue-router が提供するものと動作は同じです。各メソッドが何をするのかについてのより多くの情報は、ルーターのドキュメントを自由に読んでください。 詳細は下記ページを参照してください。 Basic Manipulation addRoute：新しいルートをルーターインスタンスに追加します。par
![[和訳] Nuxt3 公式サイト~useRouter](https://cdn-ak-scissors.b.st-hatena.com/image/square/de4be21d3ac9b8d7f07c9ae593c9a0c529ef596f/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--Ptk2_rvT--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255B%2525E5%252592%25258C%2525E8%2525A8%2525B3%25255D%252520Nuxt3%252520%2525E5%252585%2525AC%2525E5%2525BC%25258F%2525E3%252582%2525B5%2525E3%252582%2525A4%2525E3%252583%252588~useRouter%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Ami%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2MxYTZkMWY2OTkuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
Nuxt Context: where is it in Nuxt 3
In early 2019, I deconstructed and organised Nuxt 2 context keys on an A4 page for Nuxt 2.0. This is one of my most liked Nuxt 2 diagrams to date ❤️. Context keys are huddled up in this single-page reference guide of Nuxt essential ✍️ - one of my favourite features of @nuxt_js. Follow the colours & lines and it’ll all come together.#nuxtjs #vuejs #javascript pic.twitter.com/tXuTJEpKIR — Krutie Pat
Nuxt 3 State Management: Pinia vs useState | Vue Mastery
If you’re a Nuxt developer, or plan to become one with Nuxt 3, you might be wondering what to use for state management. Do I use Nuxt 3’s own statement management solution: useState? Should I use Nuxt 3 with Pinia? Can I use Pinia and useState together? Which is better, Pinia vs. useState? Here’s the short answer: Pinia is what you get if you keep adding more and more features to useState. More co
【図解】Next.jsのSSRが画面反映されるまでの具体的な流れ | Enjoy IT Life
ブラウザからサーバにリクエストが届く SSRに必要なPropsをリクエストする Propsを取得する SSRを実行する ブラウザにHTMLでレスポンスを返す ブラウザ上でCSRを実行する レンダリング結果をマウントする マウント後、ブラウザ上で副作用を実行する 以下ではそれぞれの過程について解説をします。 ブラウザからサーバにリクエストが届く ブラウザでURLにアクセスをするとサーバにリクエストが届きます。 SSRに必要なPropsをリクエストする サーバでUIを構築するにあたり、必要となるPropsをリクエストします。 PropsのリクエストはgetServerSideProps()で行います。 API経由でデータを取得している場合はAPIサーバへリクエストすることになります。 Propsを取得する リクエストしたPropsが返され、SSRの準備が整います。 SSRを実行する 取得したP
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
nuxt3のserver/apiで認証済みか否かをチェックする | デバッグライフ
GitHub - sidebase/nuxt-auth-example: A example application using nuxt-auth.
GitHub - cockok/nuxt-auth-example
Nuxt3におけるデータの加工・更新 - SAKURUG TECHBLOG
Error Handling in Nuxt 3 by Michael Thiessen: Nuxt Nation 2022
Nuxt 3 Crash Course #10 - Error Pages
Error Handling in Nuxt 3 by Michael Thiessen: Vue.js Nation 2023
Nuxt 3 Error Handling
import out of nuxt project is not working even after setting paths in tsconfig.json · Issue #15302 · nuxt/nuxt
TypeScript · Nuxt Concepts
Nuxt Configuration
VeeValidate 4: How to Disable the Submit Button
Nuxt3+TailwindCSS+AWS CDKでポートフォリオ制作＆公開