Unstyled PrimeVue Meets Bulma CSS

The new unstyled mode of PrimeVue allows integration with various CSS libraries. In this post, we'll try to use Bulma utilities to style the PrimeVue components.

PrimeVue Setup

We'll be using Vite+Vue in our sample. PrimeVue needs to run in unstyled mode so that the default styles are not added. We don't want to override CSS, just work with a plain canvas.

At main.js, begin with configuring PrimeVue;

import { createApp } from "vue";
import PrimeVue from "primevue/config";
const app = createApp(App);

app.use(PrimeVue, { unstyled: true });

Install Bulma

Bulma can be used with cdn or npm. Since we use Vite, let's go with npm and import it in our project at main.js.

npm install bulma

import 'bulma/css/bulma.css';

PrimeVue Components

Time to add some PrimeVue magic to the mix by adding a couple of components so final main.js becomes;

import { createApp } from 'vue';
import App from './App.vue';
import PrimeVue from 'primevue/config';
import Button from 'primevue/button';
import InputText from 'primevue/inputtext';
import Textarea from 'primevue/textarea';
import DataTable from 'primevue/datatable';
import Column from 'primevue/column';
import Panel from 'primevue/panel';

import '@/assets/main.css';
import 'bulma/css/bulma.css';

const app = createApp(App);
app.use(PrimeVue, { unstyled: true });

app.component('Button', Button);
app.component('InputText', InputText);
app.component('Textarea', Textarea);
app.component('DataTable', DataTable);
app.component('Column', Column);
app.component('Panel', Panel);

app.mount('#app');

Input Fields

A Primevue input is easy to style with Bulma by adding the input style class.

<InputText class="input" placeholder="Text input" />

Buttons

The button class with variations applies class property of a PrimeVue button.

<div class="buttons">
   <Button class="button is-info">Info</Button>
   <Button class="button is-success">Success</Button>
   <Button class="button is-warning">Warning</Button>
   <Button class="button is-danger">Danger</Button>
</div>

DataTable

For table, we'll need the mighty Pass Through props of PrimeVue to access the component internals to add any arbitrary props.

<DataTable :value="products"
        :pt="{
          table: 'table is-fullwidth stripes',
        }"
>
    <Column field="code" header="Code"></Column>
    <Column field="name" header="Name"></Column>
    <Column field="category" header="Category"></Column>
    <Column field="quantity" header="Quantity"></Column>
</DataTable>

Panel

Just like the table, with pass through props, we can pass the Bulma panel utilities to the PrimeVue panel easily.

<Panel header="Header"
        :pt="{
          root: 'panel is-primary',
          header: 'panel-heading',
          content: 'panel-block',
        }"
 >
   <p>Content</p>
</Panel>