How to Use the Bulma Framework in Vue3

Sometimes you need to create a less ugly website yourself. The world of front-end development is complex and tedious, and the combination of Vue and Bulma may be the solution. I personally find both easy to use. The Bulma UI looks great, the community is great, and if you encounter any issues, you can search and find help. The following tutorial shows how to use Bulma in a new Vue3 project.

1. Create a Vue3 application

npm init vue@latest

This command will install and execute create-vue, the official Vue project scaffolding tool. You'll see some optional features:

✔ Project name: … ✔ Add TypeScript? … No / Yes ✔ Add JSX Support? … No / Yes ✔ Add Vue Router for Single Page Application development? … No / Yes ✔ Add Pinia for state management? … No / Yes ✔ Add Vitest for Unit testing? … No / Yes ✔ Add Cypress for both Unit and End-to-End testing? … No / Yes ✔ Add ESLint for code quality? … No / Yes ✔ Add Prettier for code formatting? … No / Yes

Scaffolding project in ./... Done.

This is a learning project, so select yes to all the options.

After the project is created, follow these steps to install dependencies and start the development server:

cd npm install npm run dev

With these simple steps, you have your first Vue 3 project up and running.

2. Install Bulma

• Install Bulma dependencies

npm install --save-dev node-sass sass-loader

• Install Bulma

npm install bulma

3. Import Bulma into the Vue3 project

• In src/assets/main.css, add the following:

/* Bulma Import */ @import 'bulma/css/bulma.css';

• In src/main.ts, make sure to import the main.css file. If you created the project using the instructions in the previous article, it should be included by default.

import { createApp } from "vue";

import { createPinia } from "pinia";

import App from "./App.vue";

import router from "./router";

import "./assets/main.css";

const app = createApp(App);

app.use(createPinia());

app.use(router);

app.mount("#app");

Note: This is the line

import "./assets/main.css";

4. Create a button validation in the about route

Add the bulma button test to src/views/AboutView.vue as follows:

Open http://localhost:5173/about in your browser. As shown in the figure, the various colored buttons display normally, indicating that Bulma has been successfully used.

This is not a professional front-end developer, so please feel free to correct any errors.