基礎から学ぶ Vue.js
# 時間差トランジション トランジションフックを使用することで、リストの要素を表示するタイミングをずらす時間差トランジションが行えます。 このコンテンツは、コードが長すぎて書籍から削ったものなので、若干説明も入っています。 # デモ # 使用している主な機能 リストトランジション 205ページ トランジションフック 212ページ 算出プロパティ computed 120ページ # ソースコード ソースコード # 動的なリストを作成 まずは、トランジションを適用する動的なリストを準備しましょう。 リストへの要素の追加と削除、current プロパティの倍数の要素のみを抽出する機能を実装しています。 <template> <div class="example"> <p> <button @click="doAdd">追加</button> <button @click="current=1"
Nuxtでfontawesomeを使うとき、必要なアイコンのみバンドルする
Nuxtでfontawesomeを使用する方法 nuxt-fontawesomeを使って実装していきます。 まずは、必要なパッケージをインストール npm i -D nuxt-fontawesome @fortawesome/vue-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-brands-svg-icons インストールができたら、公式ドキュメントを元にnuxt.config.jsにnuxt-fontawesomeの設定を記述していきます。 module.exports = { //省略 modules: [ 'nuxt-fontawesome' ], fontawesome: { imports: [ { set: '@fortawesome/free-brands-svg-icons', icons:
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
【Firebase Auth】Nuxt.jsでリロード時に認証情報を再取得する方法(SPA編)
どうも。VueにハマりまくりのTack-Tです。 今回はFirebase Authenticationを使った認証機能の実装について書いてみたいと思います。 Firebase Authentication便利ですよね。 ただ、Vuexにユーザ情報とか保持させているとリロード時に気を付けてあげる必要があります。 今回はこの部分にフォーカスを当ててみます。 おそらく長くなるのでSPA編とSSR編に分けて連載にしようと思います。 この記事を読む前に 今回はFirebaseUIを使いますが導入や設定については本記事では触れません。 理由は優良な記事が他にたくさん存在するからです。 また、以下の資料には必ず目を通しておいてください。 FirebaseUI でウェブアプリに簡単にログイン機能を追加する FirebaseUIのREADME ことのはじめ 今回のテーマの例として以下の機能を持ったアプリを作
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
shoopon.com - shoopon リソースおよび情報
【Nuxt.js】「ページコンポーネント」（asyncData、fetch、コンテキスト、layout） | プログラミングマガジン