feat: add buefy example

examples/with-buefy/nuxt.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  /*
+  ** Customize the progress bar color
+  */
+  loading: { color: '#3B8070' },
+  mode: 'spa',
+  plugins: ['~plugins/buefy'],
+  router: {
+    linkActiveClass: 'is-active'
+  }
+}

examples/with-buefy/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "with-buefy",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "scripts": {
+    "dev": "nuxt",
+    "build": "nuxt build",
+    "start": "nuxt start"
+  },
+  "dependencies": {
+    "buefy": "^0.5.4",
+    "nuxt": "latest",
+    "vue": "~2.4.4"
+  },
+  "devDependencies": {
+    "node-sass": "^4.6.0",
+    "sass-loader": "^6.0.6"
+  }
+}

examples/with-buefy/pages/about.vue

@@ -0,0 +1,3 @@
+<template>
+  <h1>About</h1>
+</template>

examples/with-buefy/pages/index.vue

@@ -0,0 +1,25 @@
+<template>
+  <nav class="navbar has-shadow is-light">
+    <div class="container">
+      <div class="navbar-brand">
+        <nuxt-link to="/" class="navbar-item">
+          <img src="~/assets/logo.png">
+        </nuxt-link>
+      </div>
+      <div class="navbar-menu">
+        <div class="navbar-start">
+          <nuxt-link to="/" class="navbar-item is-tab" exact>Home</nuxt-link>
+          <nuxt-link to="/about" class="navbar-item is-tab" exact>About</nuxt-link>
+        </div>
+      </div>
+    </div>
+  </nav>
+</template>
+
+<style lang="scss">
+  $primary: blue;
+  $navbar-tab-active-border-bottom-color: red;
+  @import "~bulma";
+  @import "~buefy/src/scss/buefy";
+</style>
+

examples/with-buefy/plugins/buefy.js

@@ -0,0 +1,4 @@
+import Vue from 'vue'
+import Buefy from 'buefy'
+
+Vue.use(Buefy)