Nuxt.jsのSSRとCSRのライフサイクルがよく分からず、検証してみたので備忘録として残しておきます。 今回使用しているバージョンはNuxt 2.12です。 SSRとCSR サーバーサイドレンダリング(SSR)とは、サーバー側でHTMLを描画してブラウザに直接表示する手法です。 詳しくは公式ガイドに載っています。 Vue.js サーバサイドレンダリングガイド | Vue SSR ガイド Nuxt.jsでSSRを使う場合は、 初回の描画時はSSRとCSR それ以降の再描画時はCSRのみ となっています。 ライフサイクル ライフサイクルを確認するためにこのようなコードを用意しました。 <template> <div> <h1>SAMPLE</h1> <nuxt-link to="/blue">リンク</nuxt-link> </div> </template> <script> expor
本記事では、NuxtでTypeScriptを使った環境を簡単に構築する方法を解説します。 今回は、「create-nuxt-app」を使い、簡単に環境を構築します。 NuxtとTypeScriptで書くための環境を構築する方法 手順を順を追って解説していきます。NuxtでTypeScriptを使うときは公式サイトを参考にすると問題解決できることも多々あるので参考にするとよいかと思います。 今回は「create-nuxt-app」を使って簡単に設定していく方法を解説します。 前提条件 すでにNode.jsはインストールされているものとします。 yarnを使うのですでにyarnはインストールされて使えるものとします。 GitHub 参考までにGitHubに環境構築したものを上げています。 https://github.com/it-web-life/nuxt_typescript_enviro
文科系の学部に在籍しながらシビックテックに興味を持ち、関治之氏の「右腕インターン」として1年ほど関わる。その後いくつかのシビックテック活動やインターンシップを経て、株式会社almaの創業に参画。プロダクト開発をリードするかたわら、共同設立したCode for Youthなどでも活動する。学習院大学4年。 なぜNuxtJSだったのか？ あるいはjQueryでなかったか？ 偶然に決まったNetlifyは開発にとても役立った 後でコンポーネントを変更改善できるよう小さく作る ベストエフォートでの開発体制 リリース直後から届いたエンジニアの反響 シビックテック活動のベストプラクティス なぜNuxtJSだったのか？ あるいはjQueryでなかったか？ ── まず最初に、今回の技術的なバックグラウンドから聞かせてください。一見すると行政が関係した仕事とは思えない現代的な技術選定のWebサービスですが、
2019-07-21更新: Nuxt.js, modules, Node.jsをアップデート 個人開発で Nuxt.js を使用したアプリケーションをつくっているが、アプリケーションの OAuth 認証の実装に関する方法がググってもまとまっていなかったので、ここにまとめておく。 Vue アプリケーションでの OAuth 認証によるログイン純粋な Vue アプリケーションならば vue-authenticate を使用して OAuth 認証を組み込むことができるが、Nuxt.js の場合は Nuxt-Community が提供している auth-module によって煩雑な設定やコードを記述せずに簡単に組み込むことが可能である。 auth-module ではどの OAuth プロバイダでも利用できるが、現時点で Facebook, GitHub, Google, Auth0 はあらかじめエン
Auth Module for Nuxt 2. Zero-boilerplate authentication support for Nuxt 2! The module authenticates users using a configurable authentication scheme or by using one of the directly supported providers. It provides an API for triggering authentication and accessing resulting user information. While it takes care of storing the information on the client-side, it does NOT implement session handling
エンジニアの井上です！ 今回は私が最近気になっていたAuth0とNuxt を使って簡単な認証機能を作っていきたいと思います。 認証をどのように実装するかは皆さん結構悩まれているかなと思います。 Auth0は様々な既存プロバイダと自由に連係可能かつマルチデバイス対応、多要素認証に対応しているなどのメリットがあり、かつ導入がとても簡単そうなので個人的に注目しています！ Auth0とは Nuxtとは Auth moduleとは Nuxt middlewareとは 実際にAuth0で認証作ってみる Nuxt でプロジェクト作成 Auth Moduleを追加する Auth0を設定する 認証ページを作成する ログインしてみる middlewareを使用してログインチェックする 終わりに Auth0とは Auth0 は認証基盤サービス (IDMaaS) です。マルチデバイス対応しOpenID Conne
本文書ではNuxt.jsのモジュールnuxtjs/authを使い、Tokenを利用したJWT(JSON WEB TOKEN)のAuth(認証)の設定を行っています。Nuxt.jsでJWTの認証を行うためにはバックエンドが必要になります。バックエンドにはNodeのExpress.jsを使って構築します。本文書を読むことでNuxt.js環境下でTokenを利用したユーザ認証の設定手順の流れを理解することができます。 Tokenを使った認証の設定が行えることを本書の目的としているため入力フォームのデザイン、バリデーションやセキュリティについての説明は行っていません。特にセキュリティについてはJWTの設定方法がわかった後にしっかりと勉強してください。 Express.jsを使ったバックエンドの設定については一緒に記述すると文書が長くなるためまたフロントエンドにNuxt.jsを利用した場合のみ利用で
Nuxt.jsでもVue.jsで同様にaxiosを利用することで外部からデータを取得することができます。外部からのデータ取得はアプリケーションを構築する上で表示に重要な部分なので本文書ではNuxt.jsにおけるaxiosの使い方とasyncDataの使い方について説明を行っています。 Nuxt.jsではサーバサイドでデータを取得する際はasyncData Hookまたはfetch Hookの中にデータを取得する処理を記述します。クライアントサイドでデータを取得する際にはmounted Hookの中にデータを取得する処理を記述します。 fetch HookはJavaScriptのfetch関数とは異なります。また本文書ではfetch Hookについての説明は行っておりません。
先週、弊社が運営する３Dモデル検索ウェブサービス「heymesh」をリニューアルしました！4/10にサービスをリリースしてから初の大きなリニューアルになります。 今回リニューアルした内容の一つに今までVue.jsで書かれていたheymeshをNuxtに対応させるという要件があったのですが、本記事はVueで書かれたサイトをNuxt対応させる途中でハマったポイントと、どのように解決したのかについて自分用のメモもかねてまとめました。 本題から少し外れるため詳細は割愛しますが、Nuxt対応するに至った経緯としてはOGPやSEO対策しやすくするという要求があったためです。 ハマりポイント１：S3ホスティングが使えない heymeshの最初のリリースの際にはVue.jsで実装されていました。そのため、インフラ側はスタンダードにS3とCloudfrontでWebホスティングする手法を採用していました。
Vue.js v2.6 is required, v2.6.12 is recommended Bootstrap v4.3.1 is required, v4.6.1 is recommended Popper.js v1.16 is required for dropdowns (and components based on dropdown), tooltips, and popovers. v1.16.1 is recommended PortalVue v2.1 is required by Toasts, v2.1.7 is recommended jQuery is not required Check out what is new in BootstrapVue release v2.23.0. If you are migrating from a previous
この記事では、サーバーサイドレンダリングする Universal モードの Nuxt.js フロントアプリと、それとは異なるサブドメインで運用される Web API という構成でクッキー認証とCORSを実現する方法を紹介します。 Nuxt でアプリケーションを構築する場合、サーバーサイド（というかデータ取得部分）は Web API になるでしょう。そして Web API での認証といえば JWT を用いたステートレスなトークン認証が一般的かと思います。しかし JWT を LocalStorage に格納する実装は脆弱なアンチパターンであると主張する記事や以下参考リンクの記事を読み、フロントエンド + Web API な構成でもクッキーで認証を行い CORS でクロスサイトなアクセスを防ぐ実装パターンを考えてみました。 今回の実装パターンは以下の記事を参考にしました。 独自ヘッダをチェックす
SSRなNuxt、リロードするとstoreから認証情報が消えてしまい、 認証状態で初期レンダリングできないのつらいなとおもっていたら、 Nuxtのサンプルがよさげだったので、自分用に再整理してみた。 認証ルート - Nuxt.js ざっくりの方針 認証情報をStoreに保存するときに、sessionにもいれておく sessionにいれるために、serverMiddlewareを使う serverMiddlewareではexpressを立てて、sessionに詰める/削除だけする 準備する。設定する。 ライブラリのインストール npm install --save express express-session body-parser whatwg-fetch serverMiddlewareの@/api/index.ts serverMiddlewareで呼ばれる処理を書く。 セッションを
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
