DEV Community

Cover image for Unstyled PrimeVue Meets Bulma CSS
Cagatay Civici
Cagatay Civici

Posted on

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 });
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
import 'bulma/css/bulma.css';
Enter fullscreen mode Exit fullscreen mode

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');

Enter fullscreen mode Exit fullscreen mode

Input Fields

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

<InputText class="input" placeholder="Text input" />
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Demo

The complete source code is available to StackBlitz.

Top comments (1)

Collapse
 
yigitfindikli profile image
Yiğit FINDIKLI

🔥🔥🔥