【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.js + Firebase Authentication + FireStoreでwebアプリケーションハンズオン - Qiita
Nuxt.js + Firebase Authentication + FireStoreでwebアプリケーションハンズオンハンズオンFirebaseAuthFirestoreNuxt 本記事は以下に引っ越しました。 今後Qiita上での更新はありません。 この記事のターゲット Nuxt.js + Firebaseで何か作りたい Firebase AuthenticationとCloud FireStore使いたい Chapter1 firebaseの準備 まずはfirebase側を準備します。 今回用意するのは - プロジェクト - Authentication - FireStore の三つ。 firebase consoleにログイン 1.https://firebase.google.com/?hl=ja へアクセス 2.右上の「ログイン」ボタンからログイン。 3.ログインできたら
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 + firebaseでサーバレスな図書管理デモアプリを3日で作成・デプロイした - Qiita
時間でいうと25hで設計・実装・デプロイまでできたのでメモとして残します 完成gif こんな感じで図書を管理する上で必要となるであろう各機能を実装しました。 URL載せていたのですがアクセス増えて怖くなったのでURLは消しました。。 執筆する中でバグをチラホラ見つけてしまいましたが、一旦書き切ります・・・ モバイルもホラ（レイアウトは考慮が必要） 経緯（動機） 弊社では業務で使用する図書を経費購入できる制度があることもあり、社内図書がかなり溜まってきていました。 図書の管理は、現状スプレッドシートで管理しており、これが特に破綻していると言うことはなかったのですが、モバイルから触りたいなぁという個人的な都合がありました。 そこで簡単な図書管理アプリケーションのデモを作ってみようと思い立ちました。 で、自分的に手応えがあったらこれでいきませんかと提案してみよう・・・ 技術選定 モバイルから触り
Nuxt.js + Firebase で画像ファイルアップロードする - volpe’s diary
Firestorage に画像ファイルをアップロードしたくなったのでやってみる。 やってることは一般的なファイルアップロードの流れと変わらないが、Firestorage にアップロードする処理は store の action として実装している。 まずは view に form を設置する。 @change イベントハンドラを設定する。 input(type="file", :multiple="false", accept="image/*", @change="detectFiles($event)") 次に methods にファイル選択時のイベントハンドラを定義する。 アップロードするファイル名は他と被らないように uuid ライブラリを使って動的に生成している。 ファイル名とファイル本体を取得したら store の uploadImage へ渡す。 import uuid fro
Nuxt で Firebase を使う (Cloud Firestore & Hosthing) - かもメモ
株式会社ROLOさんが主催しているJavaScript Buildersで受けたHands-onでやったことを復習も兼ねて調べながらメモ。 1. Nuxtのプロジェクトを作成 $ npx create-nuxt-app <Project Name> $ cd <Project Name> create-nuxt-appをインストールした覚えがないのですが、npxコマンドだとそのままプロジェクトが作成できるっぽい!? Nuxt.jsの起動 $ yarn run dev ブラウザでhttp://localhost:3000にアクセス Nuxt.jsで静的ファイルの生成 $ yarn run generate 2. プロジェクトをFirebaseに接続する Firebaseのコンソールから新規プロジェクトを作成している前提。 2-1. Firebase CLIのインストール Firebase C
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
FirebaseのStorageを使ってみる｜sumi｜note
Nuxt.js+VuexFire+Firebaseを使って掲示板を作ってみました｜高橋悠太 / Yuta Takahashi｜note
『Nuxt + Firebase Hosting』で超速deploy - Qiita
Nuxt.jsとFirebaseでSPA×SSR×PWA×サーバーレスを実現する - DMM inside