DEV Community

Cover image for Bulma + Vue = Easy Setup
Aashir Khan
Aashir Khan

Posted on • Updated on • Originally published at justaashir.com

Bulma + Vue = Easy Setup

Read here instead with copy-able code instead of screenshots

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 : https://dev.to/helleworld_/integrating-dart-node-sass-in-vuejs-4o39

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

OR

   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

require('./scss/main.scss');
Enter fullscreen mode Exit fullscreen mode

There is another thing called Buefy, Ali wrote a fantastic post about this : https://dev.to/aligoren/bulma-based-ui-components-for-vuejs-41i4.

Bye Bye, I'm active on Twitter : twitter.com/justaashir.

Top comments (1)

Collapse
 
justaashir profile image
Aashir Khan

Read this instead: justaashir.netlify.app/blog/bulma-...

I regret writing this bad here, with screenshot of code instead of code LMAO and weird writing. I was just starting.