DEV Community

Cover image for Bulma + Vue = Easy Setup

Bulma + Vue = Easy Setup

justaashir profile image Aashir Aamir Khan Originally published at Updated on ・2 min read

I am learning VueJs nowadays and it's Awesome! VueJS community is very strong, I think I can also contribute to it by writing this post.

Bulma.css is the main driver right now to make responsive designs and it's very customizable and modular as they say, You can easily integrate it into VueJS workflow. It's not like just using the cdnjs version, you can customize the SaSS variables to give Bulma your own theme or almost control everything from the border's color to the table header's padding with Bulma SaSS variables.

1 . You have to install VueJs with CSS Preprocessors Sass with Node-Sass or Dart-Sass

You can read this beautifully written article :

2 . Install Bulma First

Na Na Na, the CDNJS will not work here. you have to install it through npm :

    npm install bulma  
Enter fullscreen mode Exit fullscreen mode


   yarn add bulma
Enter fullscreen mode Exit fullscreen mode

Now Check out the package.json you will find Bulma there in dependencies

3. Now you can create a folder or place the SaSS file in /assets

make a file named whatever and place wherever in /src' with.scss` file extension.

4. Open the Sass File and setup Bulma

you can import the sass file of Bulma from /.node-modules into this file like this and customize it, you have to set Bulma Variables before importing Bulma like this. Provide the right path from node-modules
Setup Bulma Carbon

5 . Connect it to your VueJs App

I don't know if it's the right way to connect the Bulma with VueJs, but it's working fine for me. By this, you don't have to care about the generated CSS files or sass loader. In this way, you can connect your Bulma and sass: **You have to provide the exact path to your file. In My Case it is

Enter fullscreen mode Exit fullscreen mode

There is another thing called Buefy, Ali wrote a fantastic post about this :

Bye Bye, I'm active on Twitter :

Discussion (1)

thebarefootdev profile image

Nice, but it fails with Vue3 and with Typescript, so I cant use it. I can use the CSS of course but it defeats the purpose of the component library

Forem Open with the Forem app