shimar's blog

Nuxt.jsでBuefyを使う

2018-09-24
nuxtjsvuejsbuefybulma

以前、このブログで「vuejs+bulmaならbuefyがいいかもしれない」という記事を書きました。

ここでは、Nuxt.jsのプロジェクトでのBuefyの使い方について書いておきます。

おさらい

簡単におさらいしておくと、Buefyは、モダンなオープンソースのCSSフレームワークであるBulmaを使ったVue.js用のUIコンポーネントを提供するオープンソースのライブラリです。

前提条件

検証に使った各種ツール、パッケージのバージョンは以下のとおりです。

  • npm 5.6.0
  • vue-cli 3.0.1
  • Nuxt.js 1.4.2
  • Buefy 0.6.6

また、Nuxt.jsのプロジェクトはvue-cliで作りました。

vue init nuxt-community/starter-template <project-name>
cd <project-name>
npm install

Nuxt.jsでBuefyを使う

以下、Nuxt.jsでBuefyを使うための手順を纏めます。

Buefyをインストールする

npmでbuefyをインストールします。

npm install --save buefy

scss(sass)が使えるようにする

npmでsass-loaderとnode-sassをインストールします。

npm install --save-dev sass-loader node-sass

Vue.jsにBuefyを適用するプラグインを書く

まず、@/plugins/buefy.jsを作成し、Vue.jsにBuefyを適用します。

import Vue from 'vue'
import Buefy from 'buefy'

Vue.use(Buefy)

nuxt.config.jsに以下を追記して、上記のプラグインを有効にします。

module.exports = {
  // (略)
  build: {
    // 略
    vendor: [
      'buefy'
    ]
  },

  plugins: [
    '~/plugins/buefy'
  ]
}

Material Design Iconsを引き込む

Buefyは、デフォルトでMaterial Design Iconsを使用するため、 アイコンフォントを引き込んでおきます。

nuxt.config.jsのheadに以下を追記します。

module.exports = {
  // (略)
  head: {
    // (略)
    link: [
      // (略)
      { rel: 'stylesheet', href: '//cdn.materialdesignicons.com/2.0.46/css/materialdesignicons.min.css' }
    ]
  }
  // (略)
}

Bulmaをカスタマイズするscssファイルを書く

次に、ここにあるようなBulmaのカスタマイズをするためのscssファイルを書きます。 ファイルは、@/assets/css/main.scssとして、例として↑のページの内容をそのまま真似してみます。

@import "~bulma/sass/utilities/_all";

// Set your colors
$primary: #8c67ef;
$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に以下を追記します。

module.exports = {
  // (略)
  css: [
    '@/assets/css/main.scss'
  ],

  build: {
    // (略)
    postcss: {
      plugins: {
        'postcss-custom-properties': false
      }
    }
  }
}

これで、Nuxt.jsのプロジェクトでBuefyを使えるようになりました。

©2016-2023 shimar