Fast Static Site with Gridsome and Bulma in 5 minutes

#vue #css #jamstack #gridsome

Gridsome is a Static Site Generator developed on the top of Vue.js. It builds very fast static sites thanks to the PRPL Pattern and the JAMstack.
If Gridsome is in beta version (0.6.9 now), it already has a lot of available plugins:

source plugin for fetching data from Headless CMS
CSS frameworks

At the moment, there is no plugin for using Bulma with Gridsome.

Let's see how to add Bulma styles to your Gridsome project!

Create Gridsome project

npx gridsome create gridsome-bulma

Add Buefy (Bulma for Vue)

Easiest way to add Bulma styles to your Gridsome project is to install Buefy as a dependency. Buefy is the component library for Vue.js projects based on Bulma.

npm install --save buefy

Edit src/main.js:

import DefaultLayout from '~/layouts/Default.vue'

// import Buefy
import Buefy from 'buefy'
import 'buefy/dist/buefy.css' 

export default function (Vue, { router, head, isClient }) {
  // add Buefy to Vue project with use global method
  Vue.use(Buefy)
  Vue.component('Layout', DefaultLayout)
}

Write a page

It's time to try it yourself!

Edit src/pages/Index.vue, replace all the content by:

<template>
  <Layout>
    <div class="container is-fluid">
      <section class="section">
        <div class="container has-text-centered">
          <h2 class="title">Bulma + Gridsome = 💚</h2>
          <div class="block">
            <a href="#">
              <img src="https://bulma.dev/placeholder/pictures/bg_4-3.svg?primary=00d1b2" alt />
            </a>
          </div>
          <div class="columns is-mobile">
            <div class="column is-4">
              <a href="#">
                <img src="https://bulma.dev/placeholder/pictures/bg_4-3.svg?primary=00d1b2" alt />
              </a>
            </div>
            <div class="column is-4">
              <a href="#">
                <img src="https://bulma.dev/placeholder/pictures/bg_4-3.svg?primary=00d1b2" alt />
              </a>
            </div>
            <div class="column is-4">
              <a href="#">
                <img src="https://bulma.dev/placeholder/pictures/bg_4-3.svg?primary=00d1b2" alt />
              </a>
            </div>
          </div>
          <h4 class="title is-spaced is-4">Bulma is working with Gridsome!</h4>
        </div>
      </section>
    </div>
  </Layout>
</template>