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

今回は、Nuxt.jsにBulmaを組み込んだら、Vuexストアが理解できた件(20180503更新)を写経してみたいと思います。

→最初、CodeSandbox上で行おうと努力しましたが、どうしても、VuetifyやBulma, Font Awesomeのインストールがうまくいかず、ローカル環境で行う方針に変更しました。そのため、環境構築は、面倒なこととなっています。

14.vue.jsのvuexで入力フォーム

15.Vue.jsのvuexでカウンター

16.vue.jsのvuexでパスワード制限

17.Nuxt.jsのvuexでパスワード制限

18.Nuxt.jsとBulmaでハンバーガーメニュー

1. Nuxt.jsのVuexを用いて、Bulmaのレスポンシブなハンバーガーメニューを実装する

今回は、Nuxt.jsにBulmaを組み込んだら、Vuexストアが理解できた件(20180503更新)を写経させていてだきました。

ソースコード

Demo

Panasonic CF-RZ4
Window 8.1 Pro
VisualStudioCode 

git version 2.17.1.windows.2
node 10.14.1
yarn 1.12.3

• VisualStudioCodeのターミナル画面で、以下を入力

yarn create nuxt-app Nuxt-Bulma-Hamburger3

いろいろ聞かれるので、以下のように設定します。

1. プロジェクト名は？ ⇒ (Enter)
2. プロジェクトの一言説明は？ ⇒ (Enter)
3. サーバーフレームワークは？ ⇒ 使わない
4. eslintは使う？ ⇒ PWA supportを入れる（Linterは使わない）
5. UIフレームワークは？ ⇒ bulma
6. testフレームワークは？ ⇒ 使わない
7. レンダリングモードは？ ⇒ ユニバーサルじゃなくてシングルページアプリケーション
8. axiosモジュールは使う？ ⇒ 使わない
9. 作者名は？ ⇒ (Enter)
10. パッケージマネージャは？ ⇒ npmじゃなくてyarn

cd Nuxt-Bulma-Hamburger3
yarn run dev

• アドレスをCtrlを押しながらクリックすると、以下のページが開きます。

これで、Nuxt.jsでBulmaを使用する準備が出来ました。

pages/ディレクトリで、about.vueとcontact.vueの新規作成を行う。

pages/about.vue

<template>
  <section class="hero is-primary is-bold">
    <div class="hero-body">
      <h1 class="title is-size-2">About</h1>
      <h2 class="subtitle is-size-4">NBH3とは？</h2>
    </div>
  </section>
</template>

pages/contact.vue

<template>
  <section class="hero is-info is-bold">
    <div class="hero-body">
      <h1 class="title is-size-2">Contact</h1>
      <h2 class="subtitle is-size-4">連絡先はこちらです</h2>
    </div>
  </section>
</template>

https://www.npmjs.com/package/@fortawesome/fontawesome-free-webfonts

→ん？、https://git.io/fNCzJ　へ行ってみる

→https://www.npmjs.com/package/@fortawesome/fontawesome-free　へ行ってみる

Weekly Downloadsが23万、、、すごい。。。

• Add Dependencyから、@fortawesome/fontawesome-free　をインストールする（他のはアンインストールする）

参考
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を導入する
→これがよさそうです。やってみます。

1. Add Dependencyから、nuxt-fontawesome, @fortawesome/fontawesome-svg-core, @fortawesome/vue-fontawesome, @fortawesome/free-solid-svg-icons をインストール
2. nuxt.config.jsに以下を追記

module.exports = {
 modules: [
    'nuxt-fontawesome' //ここに追記
  ],


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

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

目次：

前：

次：