導入環境

クライアントにとりあえず動くの見せるようにワイヤーフレームを元にモックを作って欲しいと言われたので、
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フレームワーク初めて使ってみましたが楽です。