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
yarn add bulma
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
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
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
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.