【v2対応】Nuxt.jsとFirebaseを組み合わせて爆速でWebアプリケーションを構築する - Qiita
Firebase Advent Calendar 2017 21日目の記事です。 フリーランスでフロントエンドを中心にエンジニアをやっているpotato4dです。 普段はVue.jsを中心に、案件を進めたりコミュニティに関わったりしていますが、今回はそんなVue界隈で今アツいフレームワークであるNuxt.jsとFirebaseを組み合わせて、SPA + SSRにAuthと Firestore を組み合わせたアプリケーションを高速で作る方法を、サンプルとあわせてご紹介します。 2019/10/16 追記 このサンプルは Firestore が存在しない Nuxt v1.x + RTDB 時代のコードを愚直に移行している ので全体的に資料が古くなっています。 インフラ構成については順次更新していますが、特にデータストア操作周りについては できるだけ参考にしないでください。 2019/07/02
Nuxt/VuexでFirebase Authenticationを使ってユーザー認証機能を作る - フリーランチ食べたい
Nuxt/VuexでFirebase Authenticationを使ったユーザー認証機能を作るにあたって、基本的なやり方はFirebaseドキュメントに書いてあるのですが、「どこに何を書けばいいのか」がよくわからなかったので調べながらまとめてみました。 完成形 こんな感じで用意されたUIを使ってログイン機能が実装できます。 前提条件 Firebase Projectの作成/Firebase SDKの作成はNuxt/Vuexには関係しない部分なので次の記事を参考に行ってください。この記事はFirebase SDKをNuxt/Vuexにどう組み込むか、を中心に書きたいと思います。 firebase.google.com 環境 nuxt@2.5.1 vue@2.6.10 vuex@3.1.0 firebase@5.9.2 firebaseui@3.5.2 FirebaseUIインストール＆CS
Nuxt.jsのStoreによるデータ保存 [vuex-persistedstate][js-cookie]
Nuxt.jsにおいてStore（ストア）を利用すると、データの状態管理をおこなうVuexによってコンポーネント間のデータの受け渡しを一元化できます。本記事ではそのStoreとvuex-persistedstateモジュールを利用してデータをLocal Storage（もしくはSession Storage）に保存してみます。 Storeにはクラシックモードとモジュールモードがありますが、本記事ではモジュールモードによる記述で説明していきます。２つのモードの違いについては公式サイトを参照して下さい。 Nuxt.jsによるプロジェクトの作成は下記ページをご覧下さい。 Nuxt.js入門 [$route.params][layouts] プロジェクト内のディレクトリを確認します。Storeによる機能は、主に「store」ディレクトリ内にファイルを追加していくことで利用できます。 $ tree
VuexのStoreはNuxt.jsのマニュアルを見るとすぐ理解できる - Crieit
最近のJavaScriptのフレームワークを勉強したての人の場合、Vue.jsなどはすぐ理解できても、Fluxの概念やVuexのStore等でわからなくなってしまうことはありませんか？ そういう場合、Nuxt.jsを触りつつNuxt.jsのマニュアルを見ると非常に簡潔で理解しやすいです。 具体的には下記のページです。ここを参考にしながら説明していきます。先にリンクの説明を見たい場合は「モジュールモード」の方を見るとより分かりやすいと思います。当記事の内容もそちらをベースに進めていきます。 Vuex ストア - Nuxt.js そもそも何に使うものなのか？ Storeはアプリケーション全体の状態を管理してくれるものです。具体的にはログインしているユーザーの情報などが一番わかり易いと思います。 具体的にどうやって使うのか Nuxt.jsの場合、まず store/index.js に状態の定義を
NuxtアプリケーションをJestでテストする - アクトインディ開発者ブログ
morishitaです。 このところNuxtのSPAを作っていました。 次のエントリで紹介したものに手を入れていたのですが、このときにはテストを書いていませんでした。 tech.actindi.net 今回はちゃんとテストも書こうと思ってやってみました。 いくつかすんなり行かず試行錯誤した部分があるのでそれを書こうと思います。 Nuxt SPAのテスト SSRを含まないNuxt SPAアプリケーションの構成要素は大雑把に次を含んでいます。 コンポーネント ページコンポーネントから使われる構成要素を実装したVueのSFC1 ページコンポーネント ルーティングとひも付きページを構成するSFC Vuexストア クライアントサイドでデータを格納しデータフローを制御するモジュール PluginやMiddleware Nuxtからフックされるモジュール その他ユーティリティ的なモジュール 他のコンポー
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【NuxtJS】Vuex で mapGetters 引数ありの書き方 - tomatoaiu の Tech Blog
