potato4d / nuxt-beginners-guide

Japan's first book that corresponds to Nuxt.js v2 and focuses on deep content.

Nuxt.js beginners guide examples

This is supported repository to Nuxt.js beginners guide(published by C&R Institute, author: @potato4d).

Buy: https://www.amazon.co.jp/dp/4863542569/

About

We are hosting the following contents of Nuxt.js beginner's guide.

• Chapter sample codes
• Support website source code
• User support(on issues / PRs)

Author

HANATANI Takuma a.k.a. potato4d

• Freelance Web engineer in Japan
• Vue.js Japanese document maintainer
• Nuxt.js Japanese document maintainer
• Nuxt.js contributor

License

MIT License

Contributors

Thanks goes to these wonderful people (emoji key):

Takuma HANATANI 💻 🚧 📖 🐛

takepan 📖

Daisuke Iwao 📖

D.Horiyama 📖 ⚠️ 🐛

This project follows the all-contributors specification. Contributions of any kind welcome!

nuxt-beginners-guide's Issues

Bot

4章のnuxt-blog-serviceで投稿一覧から個別投稿を選択後リロードすると404エラー

catch(e) で console.error(e)するとこんなエラーが出ていました:

TypeError: Cannot read property '$route' of undefined
    at store.getters.posts/posts.find.p (pages/posts/_id.js:143:65)
    at Array.find (<anonymous>)
    at asyncData (pages/posts/_id.js:143:41)
    at process._tickCallback (internal/process/next_tick.js:68:7)

てことは、こうか

diff --git a/app/pages/posts/_id.vue b/app/pages/posts/_id.vue
index 61c1abf..6bca794 100644
--- a/app/pages/posts/_id.vue
+++ b/app/pages/posts/_id.vue
@@ -28,7 +28,7 @@ export default {
         }
         try {
             await store.dispatch('posts/fetchPost', { id })
-            if(!(store.getters['posts/posts'].find(p => p.id === this.$route.params.id))) {
+            if(!(store.getters['posts/posts'].find(p => p.id === route.params.id))) {
                 throw new Error('post not found')
             }
         } catch (e) {

4章のnuxt-blog-serviceでyarn generateするとTypeError発生

4章のnuxt-blog-serviceでyarn generateすると次のようなエラーが吐かれてビルドに失敗する。

INFO Generating pages

× error GEN ERR /posts

TypeError: Cannot read property 'headers' of undefined
at module.exports.webpack_exports.default (app/middleware/auth-cookie.js:10:0)
at promisify (.nuxt/utils.js:230:0)
at middlewareSeries (.nuxt/utils.js:210:0)
at module.exports.webpack_exports.default (.nuxt/server.js:144:0)
at _tickCallback (internal/process/next_tick.js:43:7)
at listOnTimeout (timers.js:294:7)
at processTimers (timers.js:268:5)
× error GEN ERR /posts/new

TypeError: Cannot read property 'headers' of undefined
at module.exports.webpack_exports.default (app/middleware/auth-cookie.js:10:0)
at promisify (.nuxt/utils.js:230:0)
at middlewareSeries (.nuxt/utils.js:210:0)
at module.exports.webpack_exports.default (.nuxt/server.js:144:0)
at _tickCallback (internal/process/next_tick.js:43:7)
at listOnTimeout (timers.js:294:7)
at processTimers (timers.js:268:5)
× error GEN ERR /

TypeError: Cannot read property 'headers' of undefined
at module.exports.webpack_exports.default (app/middleware/auth-cookie.js:10:0)
at promisify (.nuxt/utils.js:230:0)
at middlewareSeries (.nuxt/utils.js:210:0)
at module.exports.webpack_exports.default (.nuxt/server.js:144:0)
Done in 37.98s.

P125のSAMPLE CODEのパス

P125のSAMPLE CODEのパスが「store/index.js」となっていますが、「store/posts.js」の誤りではないでしょうか。

README

nuxt-blog-serviceのサンプルがログイン後に機能しません

nuxt-blog-serviceのディレクトリをダウンロードし、そのままyarnしてFirebaseのURLも自分のものに変えて実行してみましたが、
ユーザー登録まではできても、ログイン後に下記のようなエラーが出てしまい、クッキーを削除するまで元の画面に戻れなくなってしまいます。
Firebaseの方にはusersのデータはきちんと記録されているようです。

P.115 nuxt_blog_service の投稿一覧において投稿日時が表示時刻になってしまう

p.115に「かつ日付やユーザーが正しく表示されていると完成です」とあるが、投稿日時が表示時刻になってしまう。

p.111 で保存されるべきところ、保存されていない
created_at should be added to the payload before this post

nuxt-beginners-guide/packages/nuxt-blog-service/app/store/posts.js

Line 44 in bd41fe1

const post_id = (await this.$axios.$post('/posts.json', payload)).name

P102のcatchブロックの引数eがない

P102のpages/index.vueのサンプルコードですが、
-------------ココカラ--------------------
this.$router.push('/posts/');
} catch() {
this.$notify.error({
title: 'アカウント作成失敗',
message: '既に登録されているか、不正なユーザーIDです',
position: 'bottom-right',
duration: 1000
});
-------------ココマデ--------------------
「} catch() {」は「} catch(e) {」のtypoではないでしょうか。

4章のnuxt-blog-serviceで投稿をいいねするとユーザ別投稿が消える

users/<ユーザID>/postsが消える。

app/store/index.jsのactions

  async addLikeLogToUser({ commit }, { user, post }) {
    user.likes.push({
      created_at: moment().format(),
      user_id: user.id,
      post_id: post.id
    })
    const newUser = await this.$axios.$put(`/users/${user.id}.json`, user)
    commit('updateUser', { user: newUser })
  },
  async removeLikeLogToUser({ commit }, { user, post }) {
    user.likes = post.likes.filter(like => like.user_id !== user.id) || []
    const newUser = await this.$axios.$put(`/users/${user.id}.json`, user)
    commit('updateUser', { user: newUser })
  }

渡ってくるuserにpostsメンバが含まれておらず、これをPUTしているのが原因。

  async addLikeLogToUser({ commit }, { user, post }) {
    user.likes.push({
      created_at: moment().format(),
      user_id: user.id,
      post_id: post.id
    })
-   const newUser = await this.$axios.$put(`/users/${user.id}.json`, user)
+   const newUser = await this.$axios.$patch(`/users/${user.id}.json`, user)
    commit('updateUser', { user: newUser })
  },
  async removeLikeLogToUser({ commit }, { user, post }) {
    user.likes = post.likes.filter(like => like.user_id !== user.id) || []
-   const newUser = await this.$axios.$put(`/users/${user.id}.json`, user)
+   const newUser = await this.$axios.$patch(`/users/${user.id}.json`, user)
    commit('updateUser', { user: newUser })
  }

PUTをPATCHにすると消えなくなるが、対症療法的。
postsメンバを持たないuserがここに渡ってくるのがそもそもまずい

タイポを見つけました

はじめまして。
こちらの書籍のkindle版でタイポを見つけたのでその連絡です。
mutationsの手前に「,」が抜けてました。
（githubのコードは問題なかったです）

ご確認よろしくお願いします。

ユーザーページ実装時のエラー

p119~121のsample codeではfetchUserの際にユーザデータをとってこれない。
pages/users/_id.vueの

const {id} = route.params

の部分で{id}にはpost同様ランダムな英字がIDとして入るため、

export const actions = {
  async fetchUser({ commit }, { id }) {
    const user = await this.$axios.$get(`/users/${id}.json`)
    commit('addUser',{user})
  }
}

上記getの際にでエラーが起こると思うのですがどうでしょうか？

P92の記載について

P92のcreate-nuxt-appで出来上がった後のディレクトリ構造について
node_modulesディレクトリについて、package.jsonと同一の階層のままにするという記載がなかったため、app以下へ移動してしまいしばらくハマってしまいましたので、そういった記載があるとハマる人が少なくなって親切かと思いました。

Add P. 56 sample code to eratta

state.users[user.id] であるべき箇所が state.user[user.id] となっている。

Typo in p.179

What

p.179 のサンプルコードの中で modules が dules になっています。

P105 auth-cookie.jsのパス

P105の

[SAMPLE CODE] auth-cookie.js

は他のページの記述ルールに合わせるなら下記が良いのかと思いました。

[SMPLE CODE] middleware/auth-cookie.js

4章のnuxt-blog-serviceで投稿のないユーザで投稿一覧を表示するとエラーになる

nuxt-blog-serviceの「app\store\posts.js」のfetchPostsアクションメソッドですが、
ログインしたユーザーに投稿が存在しない場合、
const posts = await this.$axios.$get(/posts.json)
実行直後のpostsがnullになっているのではないでしょうか。
そのため、Object.entries(posts).reverse().forEach(・・・
のところでエラーが発生するのではないかと存じます。
投稿が0件の場合の対応が必要ではないでしょうか。