BuefyをNuxt.jsに組み込む前に事前にアプリを下記の手順で作成しておきましょう。
node_moduleにbuefyを追加します。
|
1 |
yarn add buefy |
pluginsフォルダに、buefy.jsというBuefyを読み込むための設定を記述します。
|
1 2 3 4 |
import Vue from 'vue' import Buefy from 'buefy' Vue.use(Buefy) |
nuxt.config.jsに、インポートしたpluginを登録するために、下記の記述を追加します。
|
1 2 3 |
plugins: [ '~plugins/buefy' ] |
「layouts/default.vue」に、下記のCSSの記述を追加します。
|
1 |
<style src="buefy/lib/buefy.css"></style> |
後は、下記で起動すれば、ＨＴＭＬにbuefyのCSSが適用された状態で起動することができます。
|
1 |
yarn dev |
ためしに、Buefyのドロップダウンリストのサンプルを実行してみる。
Buefyの公式ページのDocumentationに多くのWebパーツのサンプルが転がっています。
https://buefy.github.io/#/documentation/dropdown
その中で、ドロップダウンのサンプルコードを試しに、ビューに貼り付けて実行してみます。
pages/index.vue
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
<template> <section> <b-dropdown> <button class="button is-primary" slot="trigger"> <span>Click me!</span> <b-icon icon="menu-down"></b-icon> </button> <b-dropdown-item>Action</b-dropdown-item> <b-dropdown-item>Another action</b-dropdown-item> <b-dropdown-item>Something else</b-dropdown-item> </b-dropdown> <b-dropdown hoverable> <button class="button is-info" slot="trigger"> <span>Hover me!</span> <b-icon icon="menu-down"></b-icon> </button> <b-dropdown-item>Action</b-dropdown-item> <b-dropdown-item>Another action</b-dropdown-item> <b-dropdown-item>Something else</b-dropdown-item> </b-dropdown> <b-dropdown disabled> <button class="button" slot="trigger"> <span>Disabled</span> <b-icon icon="menu-down"></b-icon> </button> <b-dropdown-item>Action</b-dropdown-item> <b-dropdown-item>Another action</b-dropdown-item> <b-dropdown-item>Something else</b-dropdown-item> </b-dropdown> <b-dropdown> <p class="tag is-success" slot="trigger"> Custom trigger </p> <b-dropdown-item>Action</b-dropdown-item> <b-dropdown-item>Another action</b-dropdown-item> <b-dropdown-item>Something else</b-dropdown-item> </b-dropdown> </section> </template> <style scoped> .tag { cursor: pointer; } </style> |
実行結果
下記のように、公式サンプルどおりのドロップダウンリストを表示させることができました。
この記事へのコメントはありません。