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

この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
====== Nuxt.js + Bulma + CodeSandboxメモ(2019年2月時点) ======

2019年2月時点、CodeSandboxのNuxt.js上で、Vuetify, Bulma, Font Awesomeをtryしようとしましたが、私の技術ではどうしても
『NuxtServerError Server resources are not available!』
になってしまってうまくいきませんでした。

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

--------

状態管理システムvuexが難しすぎて理解できないので、わかりやすいサイトをひたすら写経して理解しようと努力していくシリーズの5回目。

今回は、[[https://qiita.com/isamusuzuki/items/5ec800e423a3a56ef03d|Nuxt.jsにBulmaを組み込んだら、Vuexストアが理解できた件(20180503更新)]]を写経してみたいと思います。

===== 初めての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を用いて、Bulmaのレスポンシブなハンバーガーメニューを実装する

今回は、[[https://qiita.com/isamusuzuki/items/5ec800e423a3a56ef03d|Nuxt.jsにBulmaを組み込んだら、Vuexストアが理解できた件(20180503更新)]]を写経させていてだきました。

ソースコード



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
</code>

===== 新規Nuxt.jsアプリの作成 =====

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

  -https://codesandbox.io/へ行き、画面右上の、『Create Sandbox』をクリック
  -Nuxt.js　をクリック
  -Add Dependencyから、bulmaと@fortawesome/fontawesome-free-webfontsをインストール
  -Add Dependencyからsass-loaderとnode-sassをインストール
  -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" },
    "@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>

{{:18.nuxt.jsとbulmaでハンバーガーメニュー:pasted:20190205-145934.png}}

{{:18.nuxt.jsとbulmaでハンバーガーメニュー:pasted:20190205-145957.png}}

{{:18.nuxt.jsとbulmaでハンバーガーメニュー:pasted:20190205-152118.png}}

{{:18.nuxt.jsとbulmaでハンバーガーメニュー:pasted:20190205-152151.png}}

{{:18.nuxt.jsとbulmaでハンバーガーメニュー:pasted:20190205-152212.png}}

{{:18.nuxt.jsとbulmaでハンバーガーメニュー:pasted:20190205-152305.png}}

{{:18.nuxt.jsとbulmaでハンバーガーメニュー:pasted:20190205-152347.png}}

{{:18.nuxt.jsとbulmaでハンバーガーメニュー:pasted:20190205-152429.png}}

{{:18.nuxt.jsとbulmaでハンバーガーメニュー:pasted:20190205-152501.png}}

{{:18.nuxt.jsとbulmaでハンバーガーメニュー:pasted:20190205-152536.png}}

nuxt.config.js
（変更前）
{{:18.nuxt.jsとbulmaでハンバーガーメニュー:pasted:20190205-152813.png}}
（変更後）
{{:18.nuxt.jsとbulmaでハンバーガーメニュー:pasted:20190205-152900.png}}

これで、Nuxt.jsでBulmaとFont Awesome 5を利用する準備ができたはず。。。

===== インデックスページ以外のページ（about.vueとcontact.vue）を作成 =====
pages/ディレクトリで、about.vueの変更と、contact.vueの新規作成を行う。

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

参考：https://bulma.io/documentation/components/card/

{{:18.nuxt.jsとbulmaでハンバーガーメニュー:pasted:20190205-153803.png}}

{{:18.nuxt.jsとbulmaでハンバーガーメニュー:pasted:20190205-154336.png}}

あれ、、、うまくいかない。今日はここまで。。。

https://www.npmjs.com/package/@nuxtjs/bulma
こちらを使うのがよいのか？

  -Add @nuxtjs/bulma dependency using yarn or npm to your project
  -Add @nuxtjs/bulma to modules section of nuxt.config.js
  -You will need to use postcss loader if you are not already using it.
だそうです。
<code>
{
  modules: [
    '@nuxtjs/bulma'
  ]
}
</code>

<code>

  build: {
    /*
     ** You can extend webpack config here
     */
    postcss: {
      plugins: {
        "postcss-preset-env": {
          features: {
            customProperties: false
          }
        }
      }
    },
    extend(config, ctx) {}
  }
</code>

{{:18.nuxt.jsとbulmaでハンバーガーメニュー:pasted:20190206-134608.png}}
{{:18.nuxt.jsとbulmaでハンバーガーメニュー:pasted:20190206-134657.png}}

{{:18.nuxt.jsとbulmaでハンバーガーメニュー:pasted:20190206-140140.png}}

==== font awesome 5について ====

https://www.npmjs.com/package/@fortawesome/fontawesome-free-webfonts
{{:18.nuxt.jsとbulmaでハンバーガーメニュー:pasted:20190206-090643.png}}
→ん？、https://git.io/fNCzJ　へ行ってみる
{{:18.nuxt.jsとbulmaでハンバーガーメニュー:pasted:20190206-090753.png}}
→https://www.npmjs.com/package/@fortawesome/fontawesome-free　へ行ってみる
{{:18.nuxt.jsとbulmaでハンバーガーメニュー:pasted:20190206-090843.png}}
Weekly Downloadsが23万、、、すごい。。。

  *Add Dependencyから、@fortawesome/fontawesome-free　をインストールする（他のはアンインストールする）
{{:18.nuxt.jsとbulmaでハンバーガーメニュー:pasted:20190206-091117.png}}



参考
https://qiita.com/riversun/items/4faa56ac40071f638313
@riversun
2019年01月18日に更新
1年後に差がつくFont Awesome5 ～フロントエンド開発(ES6,Webpack4,Babel7)への導入～



https://qiita.com/OvThAlmin/items/154e53952bc46d91d44c
@OvThAlmin
2018年10月28日に更新
nuxt-fontawesomeを使って Nuxt.jsへFont Awesome 5を導入する
→これがよさそうです。やってみます。

  -Add Dependencyから、nuxt-fontawesome, @fortawesome/fontawesome-svg-core, @fortawesome/vue-fontawesome, @fortawesome/free-solid-svg-icons をインストール
  -nuxt.config.jsに以下を追記
<code>
module.exports = {
 modules: [
    'nuxt-fontawesome' //ここに追記
  ],


//この部分を追記
 fontawesome: {
    imports: [
      {
        set: '@fortawesome/free-solid-svg-icons',
        icons: ['fas']
      }
    ]
  }
}
</code>

{{:18.nuxt.jsとbulmaでハンバーガーメニュー:pasted:20190206-133640.png}}
{{:18.nuxt.jsとbulmaでハンバーガーメニュー:pasted:20190206-133718.png}}
{{:18.nuxt.jsとbulmaでハンバーガーメニュー:pasted:20190206-133808.png}}

{{:18.nuxt.jsとbulmaでハンバーガーメニュー:pasted:20190206-134027.png}}
{{:18.nuxt.jsとbulmaでハンバーガーメニュー:pasted:20190206-134129.png}}




https://codesandbox.io/s/1xv4vwlj4





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

前：

次：