サルでもわかるWEBプログラミング

この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
====== Nuxt_Vuetify_CodeSandboxメモ ======

2019年2月時点、CodeSandboxのNuxt.js上で、Vuetify, Bulma, Font Awesomeをtryしようとしましたが、私の技術ではどうしても
『NuxtServerError Server resources are not available!』
になってしまってうまくいきませんでした。
{{:17.nuxt.jsのvuexでパスワード制限:pasted:20190206-152453.png}}

断片的で意味のない記録になりますが、残しておきます。

===== 17.Nuxt.jsのvuexでパスワード制限（実行できず。2019/2/7時点） =====
状態管理システムvuexが難しすぎて理解できないので、わかりやすいサイトをひたすら写経して理解しようと努力していくシリーズの4回目。

前回の[[16.vue.jsのvuexでパスワード制限:index.html|16.vue.jsのvuexでパスワード制限]]では、Vue.js上でVuexを用いて、FirebaseのGoogle認証を行いました。

上記と全く同じことを、Vue.jsのRuby on Rails版のような位置にあるNuxt.jsを用いて、行いたいと思います。

Vue.jsと比べて、Nuxt.jsは「全部入り」といった感じで、たとえば、router.jsをわざわざ定義しなくても、ページを作成するだけで自動的にルーティングなどを行ってくれます。

===== 初めてのVuex目次 =====
[[14.vue.jsのvuexで入力フォーム:index.html|14.vue.jsのvuexで入力フォーム]]

[[15.vue.jsのvuexでカウンター:index.html|15.Vue.jsのvuexでカウンター]]

[[16.vue.jsのvuexでパスワード制限:index.html|16.vue.jsのvuexでパスワード制限]]

[[17.nuxt.jsのvuexでパスワード制限:index.html|17.Nuxt.jsのvuexでパスワード制限]]

[[18.nuxt.jsとbulmaでハンバーガーメニュー:index.html|18.Nuxt.jsとBulmaでハンバーガーメニュー]]



===== すること =====
  -Nuxt.jsのVuexを用いて、FirebaseへのGoogleログイン認証機能を実装する

今回は、https://qiita.com/redshoga/items/da5c0e247e0df314a257を写経させていてだきました。

ソースコード
https://codesandbox.io/s/3vq83x62r6


Demo


===== 開発環境 =====

<code>
Chrome
Codesandbox

nuxt 2.4.2
nuxtjs/axios 5.0.0

bulma 0.7.2
sass-loader
node-sass
@fortawesome/fontawesome-free-webfonts


@firebase/app 0.3.8
@firebase/auth 0.9.2
babel-polyfill 6.26.0
</code>

===== CodeSandboxで新規Nuxt.jsアプリを作成 =====
最初に、CodeSandbox上で、新規Nuxt.jsアプリを作成し、CSSフレームワークVuetifyが利用できるように設定します。

  -https://codesandbox.io/へ行き、画面右上の、『Create Sandbox』をクリック
  -Nuxt.js　をクリック
  -Add Dependencyから、@nuxtjs/vuetifyをインストール
  -nuxt.config.jsの編集

{{:17.nuxt.jsのvuexでパスワード制限:pasted:20190201-144711.png}}
{{:17.nuxt.jsのvuexでパスワード制限:pasted:20190201-144746.png}}
{{:17.nuxt.jsのvuexでパスワード制限:pasted:20190201-144824.png}}
{{:17.nuxt.jsのvuexでパスワード制限:pasted:20190201-150032.png}}
{{:17.nuxt.jsのvuexでパスワード制限:pasted:20190201-150107.png}}
{{:17.nuxt.jsのvuexでパスワード制限:pasted:20190201-151345.png}}

nuxt.config.js
（変更前）
{{:17.nuxt.jsのvuexでパスワード制限:pasted:20190201-151553.png}}
（変更後）
{{:17.nuxt.jsのvuexでパスワード制限:pasted:20190201-151710.png}}

以上で、Nuxt.jsで、Vuetifyを利用する準備ができました。

Nuxt.jsはフルスタックフレームワークのためか、Vue.jsと比べて、npm installやファイルの新規作成後に、結構時間がかかることが多い印象でした。

参考：https://qiita.com/munieru_jp/items/882727bb493c8502aea1
@munieru_jp
2018年12月01日に更新
Nuxt.jsのプロジェクトにVuetify.jsを導入する方法

===== Vuetifyのテンプレートを適用 =====
pages/index.vueに、以下のコードをコピペします。
（→後日談：layouts/default.vueも同時に編集するべきでした、、、）

<html>
<script src="https://gist.github.com/adash333/93402386f246d2447e205120df540a36.js"></script>
</html>

（変更前）
{{:17.nuxt.jsのvuexでパスワード制限:pasted:20190201-152634.png}}
（変更後）
{{:17.nuxt.jsのvuexでパスワード制限:pasted:20190201-152935.png}}
文字はセンタリングされてしまい、横幅を広げると、とんでもないことになってしまう。。。厳しいか。。。
{{:17.nuxt.jsのvuexでパスワード制限:pasted:20190201-153040.png}}


これで、index.vueの土台が出来上がって、、、いないですね。。。

→後で分かったのですが、Nuxt.jsの場合、layouts/default.vueに、中央寄せなどのCSSが記載されているため、このようになってしまうのではないかと考えられました。layouts/default.vueをうまく変更すれば、上記の方法で、vuetifyをちゃんと利用できるかもしれません。（今回はVuetifyはあきらめて、Bulmaでやっていこうと思います。）




===== Nuxt.jsにBulmaを入れてみる =====
CodeSandbox上ではVuetifyがうまくいかなかったので、Bulmaを試してみようと思います。

いきなり、CodeSandboxからNuxt.jsが利用できなくなっていて焦りましたが、nuxt 2.4.2を入れなおしたら、動きました。
https://github.com/nuxt/nuxt.js/issues/4901

<code>
CodeSandbox

nuxt 2.4.2
nuxtjs/axios 5.0.0
</code>

  *Add Dependencyからbulmaとfont-awesomeをインストール
{{:17.nuxt.jsのvuexでパスワード制限:pasted:20190204-145339.png}}
{{:17.nuxt.jsのvuexでパスワード制限:pasted:20190204-145518.png}}
  *Add Dependencyからsass-loaderとnode-sassをインストール（本当は、npm install sass-loader node-sass --save-dev ）
{{:17.nuxt.jsのvuexでパスワード制限:pasted:20190204-145724.png}}
  *Add a css block to your nuxt.config.js

<code>
// File: nuxt.config.js
module.exports = {
 /*
  ** Include css not in components
  */
  css: [
    // node.js module but we specify the pre-processor
    { src: 'bulma/bulma.sass', lang: 'sass' },
    { src: 'font-awesome/scss/font-awesome.scss', lang: 'scss' },
  ],
}
</code>
参考：http://bgraphic.no/using-bulma-font-awsome-nuxt/

（変更前）
{{:17.nuxt.jsのvuexでパスワード制限:pasted:20190204-145948.png}}
（変更後）
{{:17.nuxt.jsのvuexでパスワード制限:pasted:20190204-150031.png}}

これで、bulmaとfont-awesomeが使えるようになっているはずなのですが、、、

https://qiita.com/mnmemo/items/5eb4fb8cbfe17670fd36
@mnmemo
2018年11月16日に更新
Nuxt.jsにBulmaを導入して変数を使ったカスタマイズを行う

http://bgraphic.no/using-bulma-font-awsome-nuxt/
Using Bulma and Font Awsome with NUXT

https://qiita.com/isamusuzuki/items/5ec800e423a3a56ef03d
@isamusuzuki
2018年05月03日に更新
Nuxt.jsにBulmaを組み込んだら、Vuexストアが理解できた件

===== layouts/default.vueの編集 =====
最初、pages/index.vueを変更して、びっくりしました。
Vue.jsとNuxt.jsは異なるのですね。。。

navbarを入れるために、layouts/default.vueを、以下のように変更します。

<code>
<template>
  <div>
    <nav class="navbar has-background-info">
      <div class="navbar-brand">
        <a class="navbar-item has-text-white" href="#"> Bulmaテンプレート </a>
      </div>
    </nav>
    <nuxt />
  </div>
</template>

<style></style>
</code>

（変更前）
{{:17.nuxt.jsのvuexでパスワード制限:pasted:20190204-150318.png}}
（変更後）
{{:17.nuxt.jsのvuexでパスワード制限:pasted:20190204-151458.png}}

なぜかはよく分からないのですが、CSSフレームワークBulmaを用いる場合は、以下のように、最初に<wrap hi>section class="section"とdiv class="container"</wrap>で囲んでおくと、思ったようなデザインにできることが多いです。

<code>
<section class="section">
  <div class="container">
    <!-- ここにコンテンツを記載 -->
  </div>
</section>
</code>

pages/index.vueの変更
{{:17.nuxt.jsのvuexでパスワード制限:pasted:20190204-152604.png}}

なぜか、font-awesomeが表示されません。4とか5とかの違いがある？

https://qiita.com/OvThAlmin/items/154e53952bc46d91d44c
@OvThAlmin
2018年10月28日に更新
nuxt-fontawesomeを使って Nuxt.jsへFont Awesome 5を導入する
→@nuxtjs/font-awesomeを使う代わりに、nuxt-fontawesomeを導入するとよいそうです。

それともこちらの方が簡単か？

https://qiita.com/rema424/items/137f0de9e039a464e7db
@rema424
2018年06月02日に投稿
Nuxt.js に FontAwesome 5 を導入する方法を雑に紹介する

{{:17.nuxt.jsのvuexでパスワード制限:pasted:20190204-154603.png}}

nuxt.config.js
<code>
  css: [
    // node.js module but we specify the pre-processor
    { src: "bulma/bulma.sass", lang: "sass" },
    { src: "font-awesome/scss/font-awesome.scss", lang: "scss" },
    "@fortawesome/fontawesome-free-webfonts",
    "@fortawesome/fontawesome-free-webfonts/css/fa-brands.css",
    "@fortawesome/fontawesome-free-webfonts/css/fa-regular.css",
    "@fortawesome/fontawesome-free-webfonts/css/fa-solid.css"
  ],
</code>

無事、font-awesomeアイコンが表示された。

{{:17.nuxt.jsのvuexでパスワード制限:pasted:20190204-154915.png}}

→しかし、翌日、もう一度このページを開いてみたら、何回やっても、

NuxtServerError
Server resources are not available!

になってしまって、動かなかった。

Nuxt.jsをCodeSandbox上で動かすのは、難しいかもしれない。Nuxt.jsアプリを作成するのであれば、ローカルのパソコンで行うのが良さそう。

途中



===== Nuxt.jsのvuex（モジュールモード）でパスワード制限 =====


===== Nuxt.jsとVuetifyのリンク =====

1番確実なのは、Node.jsインストール済みのローカルのパソコンで、以下を入力し、途中でVuetifyを選ぶことです。
<code>
npx create-nuxt-app <my-project>
</code>

https://github.com/nuxt/create-nuxt-app/blob/master/README.md

しかし、2019年1月時点では、CodeSandboxでは、この方法は使えません。

https://github.com/nuxt-community/modules/blob/master/packages/vuetify/README.md
→こちらに書いてある方法(v0.5.2)をこの上の方で試してみたのですが、なんか、だめそうです。。。そりゃ、普通はcreate-nuxt-app使いますよね、、、

以下のものは、2018年9月以降、更新はされないと思われます。残念です。
https://github.com/vuetifyjs/nuxt


===== Nuxt.jsとvuexのリンク =====

https://qiita.com/redshoga/items/da5c0e247e0df314a257
@redshoga
2018年12月13日に投稿
Nuxt.js #2 Advent Calendar 201812日目
FirebaseとNuxt.jsを使ってユーザ認証関係を簡単に作ってみる+1ヶ月の自分に教えたいリンク集

https://qiita.com/y-miine/items/028c73aa3f87e983ed4c
@y-miine
2018年12月03日に更新
Nuxt.jsのストアをモジュールモードで使用するときのTips

https://qiita.com/isamusuzuki/items/5ec800e423a3a56ef03d
@isamusuzuki
2018年05月03日に更新
Nuxt.jsにBulmaを組み込んだら、Vuexストアが理解できた件
→BulmaというCSSフレームワークで、ハンバーガーメニューを作る方法が、わかりやすく記載されています。

https://tech.libinc.co.jp/entry/2018/11/15/143000
2018-11-15
真のフロントエンドエンジニアになるために、まずはNuxt.js + Firebaseを使って簡易メモ帳を作ってみた
→素晴らしいです。写経してみたいと思います。

https://wb-hp.com/blog/2018/10/15/vuex-store.html
Nuxt.js 必須スキル Vuex ストア を扱う
2018年10月15日

https://crieit.net/posts/Vuex-Store-Nuxt
だら@Crieit開発者  
2018-10-30に更新
VuexのStoreはNuxt.jsのマニュアルを見るとすぐ理解できる





















===== リンク =====
目次：

前：

後：