Buefy を Nuxt で試してみる。

ref

• Buefy
  • https://buefy.github.io/#/documentation/start
• Bulma
  • https://bulma.io/documentation/overview/start/
• CSS reference
  • http://cssreference.io
• HTML reference
  • http://htmlreference.io
• Material Design Icons
  • https://materialdesignicons.com
• Web初心者がVue.jsから始めてnuxt.jsでサイトを作ったときにやったことまとめ
  • https://qiita.com/corosuke_k/items/a5ca4c8184f431e0ee26
  • Vue.js #2 Advent Calendar 2017 | 16日目

environment

• host and directory
  • imac2
  • /home/makoto/prj/opwv/prj/study/nuxt/try-nuxt-buefy
• versions

[makoto@imac2 try-nuxt-buefy]$ node --version
v8.9.3
[makoto@imac2 try-nuxt-buefy]$ npm --version
5.5.1


   ╭─────────────────────────────────────╮
   │                                     │
   │   Update available 5.5.1 → 5.6.0    │
   │     Run npm i -g npm to update      │
   │                                     │
   ╰─────────────────────────────────────╯

[makoto@imac2 try-nuxt-buefy]$ yarn --version
1.3.2
[makoto@imac2 try-nuxt-buefy]$ vue --version
2.9.2

setup

initial template

[makoto@imac2 nuxt]$ vue init nuxt-community/starter-template try-nuxt-buefy

? Project name try-nuxt-buefy
? Project description Nuxt.js project
? Author Makoto Saito <msaito3751@gmail.com>

   vue-cli · Generated "try-nuxt-buefy".

   To get started:

     cd try-nuxt-buefy
     npm install # Or yarn
     npm run dev

• test it

$ cd try-nuxt-buefy
$ yarn install
$ yarn run dev

http://localhost:3000/

add buefy

$ yarn add buefy

$ yarn info buefy version
yarn info v1.3.2
0.6.2

• create plugins/buefy.js

cat <<EOS > plugins/buefy.js
import Vue from 'vue'
import Buefy from 'buefy'
import 'buefy/lib/buefy.css'

Vue.use(Buefy)
EOS

• register the plugin
  • edit nuxt.config.js

module.exports = {
...
  plugins: [
    '~plugins/buefy'
  ],
}

• test it

$ yarn run dev
--> got error
$ yarn add vue-server-renderer vue-template-compiler
success Saved lockfile.
success Saved 2 new dependencies.
├─ vue-server-renderer@2.5.13
└─ vue-template-compiler@2.5.13

$ yarn run dev
--> OK

test buefy

• make simple index page
  • edit layouts/default.vue
  • nuxt.config.js
    • add css for Meterial Design Icons
    • add plugins/buefy plugin
  • edit pages/index.vue

module.exports = {
  head: {
    ...
    link: [
      { rel: 'stylesheet', href: '//cdn.materialdesignicons.com/2.0.46/css/materialdesignicons.min.css' },
  ...
  plugins: [
   '~plugins/buefy'
  ]

use preprocessor

https://nuxtjs.org/faq/pre-processors

$ yarn add --dev pug@2.0.0-beta6 pug-loader coffee-script coffee-loader node-sass sass-loader

use axios

$ yarn add axios
...
success Saved 2 new dependencies.
├─ axios@0.17.1
└─ follow-redirects@1.2.6