株式会社entershareのなつきです！
最近プロジェクトでnuxt.jsを使う機会に恵まれました。

BuefyというUIのライブラリを使ってプロダクトの高速ローンチを目指しています。
それまでの手順をチームとの共有もかねて記録していきます。

Nuxt.jsって何？

Vue.jsのフレームワークです。RubyでいうところのRailsのような存在だと聞いてこともあります。
様々な機能がありますが、公式ドキュメントから引用すると下記のような感じです。

Vue ファイルで記述できること（*.vue）
コードを自動的に分割すること
サーバーサイドレンダリング
非同期データをハンドリングするパワフルなルーティング
静的ファイルの配信
ES6/ES7 のトランスパイレーション
JS と CSS のバンドル及びミニファイ化
要素（、など）の管理
開発モードにおけるホットリローディング
プリプロセッサ: Sass, Less, Stylus など
HTTP/2 push headers ready
モジュール構造で拡張できること

nuxt.jsの公式ページ
https://ja.nuxtjs.org/guide/

通常vue.jsのプロジェクトでは、ルーター(vue-router)や状態管理(vuex)を行うために、外部のライブラリを導入しながら開発を進めます。
nuxt.jsでは、そのへんの必須機能を最初から導入した状態でプロジェクトを始められるのでとても便利です。

サーバサイドレンダリングを行うためにも、よく使われます。

create nuxt-appしてみる

早速HELLO　WORLDしていきましょう。
プロジェクトを作成したい場所に移動して、下記のコマンドを実行します！

$ npx create-nuxt-app <project-name>

もしくは yarn を使ってください:
公式では、yarnが推奨されています。

$ yarn create nuxt-app <my-project>

そうするといろんな設定を求められます。
一個づつ見ていきます。

プロジェクトの名前　

プロジェクトの説明

あとからも編集できるので、適当でOK

jsのバックエンドを選択します。

今回は、APIをRailsで構築する＋SSRはしない予定なので、noneを選択

その他の細かいオプション

PWAやlinter, prettierなどは割と好みがあると思いますが、
Axiosは、httpリクエストを送るのに定番なツールなので、選択するといいことあります。

ちなみに今回は全部入れました。

CSSのライブラリを導入

結構たくさんの種類があります。
今回は、色々見ていた結果、Buefyを選択しました。
Buefyは、Bulmaで作られたモダンなUIコンポーネントをvue.jsで使うためのライブラリです。
今時の見せ方をしたアプリをペタペタコピペしながら作成できます。
詳しくは違う記事で説明します。

HELLO　WORLD

これでプロジェクトフォルダーを作成できました。果たしてHELLO　WORLDはうまくいくのだろうか？
最後画面に出てきたこのコマンドが重要です。

  To get started:

    cd <my-project>
    yarn run dev

  To build & start for production:

    cd <my-project>
    yarn run build
    yarn start

  To test:

    cd <my-project>
    yarn run test

ウェブサーバーの立ち上げに下記のコマンドを実行

cd <my-project>
yarn run dev

こうなったら成功

localhost:3000にアクセス

WOW!
全然nuxt感がない。
Buefyの色が強い。

まあ画面を表示できたのでHELLO　WORLD成功！？

ディレクトリ構成

詳しい内容は公式ドキュメントを参考にしてください。
特に、ルーティングを機能させるための構成とファイルの命名が重要です。

Buefyのテーマカラーを上書きして行く

Buefyの紫色って結構特徴的ですよね。
この色がテーマになるケースってあんまりないと思います。
と言うことで、テーマカラーを上書きしていきます。
やり方は、公式に書いてあります。

この記事も日本語でわかりやすい。
nuxt.js(v2)へBuefyを入れた。全部入れでOKだった…嬉しい。
https://qiita.com/amishiro/items/eefc858539bc9af2a60a

assetフォルダー以下にcss/buefy.scssを作成する。
このprimaryの部分をorangeに変えてみる。

// Import Bulma's core
@import "~bulma/sass/utilities/_all";

// Set your colors
$primary: orange;
$primary-invert: findColorInvert($primary);
$twitter: #4099FF;
$twitter-invert: findColorInvert($twitter);

// Setup $colors to use as bulma classes (e.g. 'is-twitter')
$colors: (
    "white": ($white, $black),
    "black": ($black, $white),
    "light": ($light, $light-invert),
    "dark": ($dark, $dark-invert),
    "primary": ($primary, $primary-invert),
    "info": ($info, $info-invert),
    "success": ($success, $success-invert),
    "warning": ($warning, $warning-invert),
    "danger": ($danger, $danger-invert),
    "twitter": ($twitter, $twitter-invert)
);

// Links
$link: $primary;
$link-invert: $primary-invert;
$link-focus-border: $primary;

// Import Bulma and Buefy styles
@import "~bulma";
@import "~buefy/src/scss/buefy";

nuxt.config.jsを編集

  /*
   ** Global CSS
   */
  css: ['~/assets/css/buefy.scss'],

注意点

ここでの注意点は２つあります。

1.サーバーの再起動
nuxt.config.jsをいじったあとは、serverを再起動しないと正常に機能しないことがあります。
開発中は変更に応じて画面が勝手にリロードしていくので、再起動は必要ないものだと思ってました。
しかし、勝手にビルドされるのは、クライアント側のみでサーバー側はそうでもないみたいです。

2.sass-loaderのインストール
このパッケージが入っていないとscssファイルを読み込んでくれません。

yarn add node-sass sass-loader

で入ります。

確認

もう一度ウェブサイトを確認します。
このように表示されていれば成功です。

まとめ

今回は、nuxt.jsとBuefyでHello Worldをしてみました。
もっと気になる人は、vue,nuxt,Buefyの公式ドキュメントを一通り読んでみるのもいいと思います。わかりやすいです。

おまけ

entershareは、一緒に開発を進める仲間を募集しています！
もくもく会もやってるので是非遊びに来てください！！

イベントの例
https://www.wantedly.com/projects/301269

nuxt.js + buefyでいい加減にHELLO WORLDする

Nuxt.jsって何？

create nuxt-appしてみる

プロジェクトの名前

プロジェクトの説明

jsのバックエンドを選択します。

その他の細かいオプション

CSSのライブラリを導入

HELLO WORLD

ディレクトリ構成

Buefyのテーマカラーを上書きして行く

注意点

確認

まとめ

おまけ

プロジェクトの名前　

HELLO　WORLD