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>
Demo
The complete source code is available to StackBlitz.
Top comments (1)
🔥🔥🔥