概要 自作のNuxt.jsはSSRモードでfirebaseにホスティングしようとネットで方法を探してました。 見つかった記事は2019の物でちょっと古くて（実際その通りやったら詰んでしまう）困ってました。 そこでこの記事とこの動画を参考になんとかデプロイできました。 でもどれも英語だったのでせっかくなので日本語の記事を書こうと思った次第です。 手順を見たくない方へ このボイラープレートをそのまま使う。 手順1 新規Nuxtアプリを作成する 注意 nuxt本体のソースコードを管理しやすいために/srcの中に入れてますが、そうしなくても良いです。ただ後述のfirebase.jsonのpredeployの設定をご自身のパスに合わせて修正してください。 手順2 まずfirebaseでアカウントを申請し、新規プロジェクトを作成してください。 nodeバージョンを10以上を使うため、プランはblaze

# 時間差トランジション トランジションフックを使用することで、リストの要素を表示するタイミングをずらす時間差トランジションが行えます。 このコンテンツは、コードが長すぎて書籍から削ったものなので、若干説明も入っています。 # デモ # 使用している主な機能 リストトランジション 205ページ トランジションフック 212ページ 算出プロパティ computed 120ページ # ソースコード ソースコード # 動的なリストを作成 まずは、トランジションを適用する動的なリストを準備しましょう。 リストへの要素の追加と削除、current プロパティの倍数の要素のみを抽出する機能を実装しています。 <template> <div class="example"> <p> <button @click="doAdd">追加</button> <button @click="current=1"

vue.jsではSlotを利用することで親コンポーネントから子コンポーネントにコンテンツを渡して表示させることができます。例えばボタンというコンポーネントを作成し、ボタン上に表示されるテキストのみ変更したい場合、親コンポーネントからSlotを使ってテキストを渡すことで子コンポーネントのボタン上に表示させるテキストを変更することができます。ボタン上のテキストを変更できることでボタンコンポーネントを再利用することが可能となります。 本文書ではSlotのみに特化して説明を行っているので本文書を読み終えるとSlot、Named Slot、データプロパティを使ったScoped Slot, メソッドを使ったScoped Slotの4つを理解することができます。 前半はSlot, Named Slotを使って親コンポーネントから子コンポーネントにコンテンツを渡す方法を確認し、後半ではScoped Slo

どうも。VueにハマりまくりのTack-Tです。 今回はFirebase Authenticationを使った認証機能の実装について書いてみたいと思います。 Firebase Authentication便利ですよね。 ただ、Vuexにユーザ情報とか保持させているとリロード時に気を付けてあげる必要があります。 今回はこの部分にフォーカスを当ててみます。 おそらく長くなるのでSPA編とSSR編に分けて連載にしようと思います。 この記事を読む前に 今回はFirebaseUIを使いますが導入や設定については本記事では触れません。 理由は優良な記事が他にたくさん存在するからです。 また、以下の資料には必ず目を通しておいてください。 FirebaseUI でウェブアプリに簡単にログイン機能を追加する FirebaseUIのREADME ことのはじめ 今回のテーマの例として以下の機能を持ったアプリを作

上記のようにモーダルウィンドウに表示する内容を props で表現してしまうと、自由度が低く使いまわしにくくなります。たとえば画像やリストやテーブルが入れられませんよね。 そこでスロットを利用します。 <modal> <template #title> This is modal window </template> <template #content> <img src="..." alt="" /> <ul> <li>...</li> </ul> </template> </modal>

Apps that communicate in real time are becoming more and more popular nowadays, as they make for a smoother, more natural user experience. In this tutorial, we’re going to build a real-time chat application using Vue.js powered by ChatKit, a service provided by Pusher. The ChatKit service will provide us with a complete back end necessary for building a chat application on any device, leaving us t

FirebaseのCloud Firestoreを扱う際、本家ドキュメントが充実していて検索すればすぐに出てくるのでそれほど困ることはありません。ただ、最初の入りとしてFiresotreのDocumentって何？ となったり、doc、docRef、cityRef、cityDocRef、snapShot、docs など、本家ドキュメントの中でも若干変数名の書き方が異なっていたりします。その為、慣れてくれば大丈夫ですが、慣れるまで毎回どう書くんだっけ？と検索することが多かったので、自分なりに解釈して整理してみました。Firestoreを扱える言語は様々用意されていますが、ここでは、JavaScript（Nuxt.js)を例に進めていきます。（セットアップは省きます） 参照元：https://firebase.google.com/docs/firestore/manage-data/add-d

目次 目次 はじめに 前提条件 Nuxtってなに？ Nuxtの主な機能 Nuxt.jsやってみる Nuxt.jsのインストール Nuxt.jsでアプリ作成 nuxt.config.jsによる設定いろいろ Nuxtの構成 Nuxtでアプリ実行 ポート(3000の部分)を変更したい場合 アプリの説明/解説 レイアウト・コンポーネントの作成 レイアウト(layouts) ページ(pages) コンポーネント(components) データの扱い/保存 firebase firebaseでdatabase作成 firebaseで認証設定 store(Vuex) デバッグ ビルド herokuにデプロイ やってみて はじめに こんにちは! 11月にLiBに入社したアベと申します。 アラサー子持ちのエンジニア(エンジニアと名乗るのは憚れる...)です。 社会人3年目からWebの世界へ転身し、webデザ

Vue.jsを使っていると 「子に渡したpropsの値を変更したら親側の値も変更されるようにしたい！」 というシーンに割とよく直面する。 propsの値はそのままv-modelでは使用できないという制約もあり、回避策の知識がないと割と困ってしまうものである。(公式に書いてあるけどというツッコミは無しな！) なので今回は子のComponentで変更された値を親に反映する方法を紹介します。 実行結果だけ知りたい人はSandboxが一番下にあるのでスクロールしてね☆ modelプロパティを指定する Vue.js 2.2.0 からmodelプロパティが追加された。 詳しくは公式にかかれているが、正直わかりにくかったのでここでも解説する。 子のComponentで以下の宣言をする export default { model: { prop: 'propData', event: 'input' }

Vue + Vuexで中〜大規模なアプリケーションの開発をするとき、どんな設計にするか未だによく悩みます。試してみては捨ててを繰り返していて、そろそろ自分の中でベターなパターンを固めたいと思いつつも固まらず、気づけば数年経ちました。 そういった前提を踏まえつつではありますが、現時点で設計時に意識していることをTips的に少しずつまとめてみようと思います。今回はVuexのGetterに関するお話です。 Getterの役割を見直す 副作用のないクエリとして実装する プロパティアクセスとメソッドアクセスを区別して命名する プリミティブでシンプルなクエリとして実装する 表示用の加工処理はComponentに実装する 例外1. 加工された値の賞味期限が長い場合 例外2. 加工処理が複数Componentで繰り返される場合 おわりに Getterの役割を見直す VuexはFluxアーキテクチャを参考に

Vue.jsを使用していてマスタッシュ記法で記述するデリミタを変更したいということはないでしょうか？ Laravelなどを使用していると変数を表示する際の表記方法が全く同じだったりします。 そんな時、マスタッシュ記法でデータバインディングするのではなく、記法を変更することが出来ます。 今回の記事では、Vue.jsでデリミタを変更する方法について紹介します。 Vue.js 2系の場合 デリミタを変更する方法は、結構簡単で下記のように記載すると変更することが出来ます。 new Vue({ el: '#app', data: data, delimiters: ["<%","%>"] }); ’delimiters: [“<%","%>“]’の部分で変更したいデリミタを指定しています。 上記の例では、<% hoge %>　のようにソースに記述するとデータバインディングをしviewに表示することが

エンジニアの井上です！ 今回は私が最近気になっていたAuth0とNuxt を使って簡単な認証機能を作っていきたいと思います。 認証をどのように実装するかは皆さん結構悩まれているかなと思います。 Auth0は様々な既存プロバイダと自由に連係可能かつマルチデバイス対応、多要素認証に対応しているなどのメリットがあり、かつ導入がとても簡単そうなので個人的に注目しています！ Auth0とは Nuxtとは Auth moduleとは Nuxt middlewareとは 実際にAuth0で認証作ってみる Nuxt でプロジェクト作成 Auth Moduleを追加する Auth0を設定する 認証ページを作成する ログインしてみる middlewareを使用してログインチェックする 終わりに Auth0とは Auth0 は認証基盤サービス (IDMaaS) です。マルチデバイス対応しOpenID Conne

大阪からこんにちは、福山健（@kenfdev）です！ 先日「v-kansai Vue.js/Nuxt.js meetup #2」で「Nuxt.jsのinjectでインジェクトしてみる話」という内容で登壇させていただきました。その内容について記事にも残しておこうと思います。 スライドに関しては以下で公開しています。 speakerdeck.com 前提知識 基本的なNuxt.jsの機能 Vuexをなんとなく知っている TypeScriptがなんとなく読める Nuxt.jsの inject 皆さん、Nuxt.jsには inject という機能があるのをご存知でしょうか？意外と知られていないんじゃないかと思うのですが、公式ドキュメントの「統合された注入」にも記載されているNuxt.jsのプラグインの機能です。この inject を使うことで、Nuxt.jsのアプリケーションで、いろいろな場所から

どうも、こうすけ（@kosuke_upd）です。 今回は、Nuxt.js で作成したプロジェクトを GitHub Pages にデプロイする方法を解説します。 Nuxt.js で作成したプロジェクトを GitHub Pages にデプロイする方法はいくつかありますが、その中でも最も簡単で管理も楽になる方法を紹介します。 では早速 GitHub Pages にプロジェクトをデプロイする手順を見ていきましょう。どれほど簡単かおわかりいただけると思います。