モックを Nuxt + Buefy で構築した忘却録

導入環境

クライアントにとりあえず動くの見せるように ワイヤーフレーム を元に モック を作って欲しいと言われたので、
UI フレームワーク 入れてサクッと作ってみました。

Mac
Nuxt 2.8.1
Buefy
node.js v10.15.3
npm 6.10.2

Nuxt 導入

ドキュメントに従って create-nuxt-app を使って入れていきます。

$ npx create-nuxt-app mockup

パッケージマネージャは Yarn を選択、
プロジェクトネームや色々聞かれるんですが、今回はモックアップだったので Enter を連打
今回はHTML出力（generate）したかったので
サーバーサイド やその多機能は全て None にしました。

Buefy 導入

パッケージを読み込みます。

$ yarn add -D nuxt-buefy

Nuxt にパッケージを読み込む

今回は css も調整する気はなかったので、そのまま読み込んでしまいます。
カスタムしたい場合は css　モジュールで読み込まず別にもできます。

nuxt.config.js に下記を記述、css やアイコンを読み込みたくない場合はコメントアウトをとってください。

nuxt.config.js

module.exports = {
  modules: [
    ['nuxt-buefy', {
      // css: false,
      // materialDesignIcons: false
    }],
  ],
}

表示テスト

index.vue に下記を記述、ボタンをクリックするとお知らせが表示されます。

index.vue

<template>
  <section class="container">
    <b-button @click="clickMe">Click Me</b-button>
  </section>
</template>

<script>

export default {
  methods: {
    clickMe() {
      this.$notification.open({
        duration: 5000,
        message: `Something's not good, also I'm on bottom`,
        position: 'is-top',
        type: 'is-danger',
        hasIcon: true
      })
    }
  }
}
</script>

ここまできたらほぼほぼ終わりですね。
UIフレームワーク 初めて使ってみましたが楽です。