To use Bulma in a Vue project, we are going to use the Buefy UI library. This library is a wrapper around the Bulma framework and provides all the components that are available with the original framework and some additional components to use:
- In the folder that you created for your Vue-CLI project, open Terminal (macOS or Linux) or Command Prompt/PowerShell (Windows) and execute the following command:
> vue add buefy
- Vue-CLI will ask whether you want to choose a style to work with Buefy; we will go with scss:
? Add Buefy style? (Use arrow keys)
none
css
❯ scss
- Then, Vue-CLI will ask whether you want to include the Material Design icons; for this project, we won't use them:
? Include Material Design Icons? (y/N) n
- Now Vue-CLI will ask whether you want to include Font Awesome icons; we will add them to the project:
? Include Font Awesome Icons? (y/N) y