Nuxt.js UI framework Buefyを使ってみる

Nuxt.js UI framework Buefyを使ってみる

Nuxtインストール時にUI frameworkにBuefyを選択して、簡単な使い方を記述

環境

  • OS  Ubuntu19.10
  • node v12.13.0
  • npm 6.12.1
  • Nuxt.js v2.10.2

Nuxt.jsインストール

test-projectというをインストールします。

Choose UI framework Buefyを選択します。

yarn devを実行して起動してみるとbuefyのレイアウトが適応されてます。

ページ追加

左カラムにページを追加してみます。

layouts配下のdefault.vueを編集します。

まだtableページはないですが、左カラムに checklist が表示されます。

次に表示されるページを作成します。今回は buefyのtableを利用して簡単なチェックリストページを作成してます。

pages配下に checklist.vueを下記のコードで作成します。

左カラムのchecklistをクリックすると下記のページが表示されます。