examples(with-buefy): update example (#5348)

examples/with-buefy/components/card.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="column">
+    <div class="card">
+      <header class="card-header">
+        <p class="card-header-title has-text-grey">
+          {{ title }}
+        </p>
+      </header>
+      <div class="card-content">
+        <div class="content has-text-centered">
+          <b-icon
+            :icon="icon"
+            size="is-large"
+            type="is-primary"
+          />
+        </div>
+      </div>
+      <footer class="card-footer">
+        <div class="card-footer-item">
+          <span>
+            <slot />
+          </span>
+        </div>
+      </footer>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      required: true
+    },
+    icon: {
+      type: String,
+      required: true
+    }
+  }
+}
+</script>

examples/with-buefy/nuxt.config.js

@@ -3,8 +3,9 @@ export default {
   ** Customize the progress bar color
   */
   loading: { color: '#3B8070' },
-  mode: 'spa',
-  plugins: ['~plugins/buefy'],
+  modules: [
+    'nuxt-buefy'
+  ],
   router: {
     linkActiveClass: 'is-active'
   }

examples/with-buefy/package.json

@@ -10,12 +10,7 @@
     "post-update": "yarn upgrade --latest"
   },
   "dependencies": {
-    "buefy": "^0.5.4",
     "nuxt": "latest",
-    "vue": "~2.4.4"
-  },
-  "devDependencies": {
-    "node-sass": "^4.6.0",
-    "sass-loader": "^6.0.6"
+    "nuxt-buefy": "latest"
   }
 }

examples/with-buefy/pages/index.vue

@@ -1,28 +1,45 @@
 <template>
-  <nav class="navbar has-shadow is-light">
-    <div class="container">
-      <div class="navbar-brand">
-        <NuxtLink to="/" class="navbar-item">
-          <img src="~/assets/logo.png">
-        </NuxtLink>
-      </div>
-      <div class="navbar-menu">
-        <div class="navbar-start">
-          <NuxtLink to="/" class="navbar-item is-tab" exact>
-            Home
-          </NuxtLink>
-          <NuxtLink to="/about" class="navbar-item is-tab" exact>
-            About
-          </NuxtLink>
-        </div>
-      </div>
+  <section class="section">
+    <div class="columns is-mobile">
+
+      <card
+        title="Free"
+        icon="github-circle"
+      >
+        Open source on <a href="https://github.com/buefy/buefy"> GitHub</a>
+      </card>
+
+      <card
+        title="Responsive"
+        icon="cellphone-link"
+      >
+        <b class="has-text-grey">Every</b> component is responsive
+      </card>
+
+      <card
+        title="Modern"
+        icon="alert-decagram"
+      >
+        Built with <a href="https://vuejs.org/">Vue.js</a> and <a href="http://bulma.io/">Bulma</a>
+      </card>
+
+      <card
+        title="Lightweight"
+        icon="arrange-bring-to-front"
+      >
+        No other internal dependency
+      </card>
+
     </div>
-  </nav>
+  </section>
 </template>
 
-<style lang="scss">
-  $primary: blue;
-  $navbar-tab-active-border-bottom-color: red;
-  @import "~bulma";
-  @import "~buefy/src/scss/buefy";
-</style>
+<script>
+import Card from '~/components/Card'
+export default {
+  name: 'HomePage',
+  components: {
+    Card
+  }
+}
+</script>