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>
Start develop server
npx gridsome develop
Access to http://localhost:8080/, and you should see this page:
This template has been generated with Bulma Builder, thanks to the team!
It was easy isn't it?
In 5 minutes you have been able to create a new Gridsome project, add Bulma style and get a first working page, great! ๐ฅ
Have you already tried Gridsome + Bulma? Share your projects in comment section!
Top comments (2)
Thank you for this tutorial !
Development completed in less than 5 minutes! All I have to do now is having fun and make a static site :)
Thanks for your feedback ๐