Menggunakan PrimeVue

Sekarang kita akan belajar cara menggunakan PrimeVue. Sebenarnya ini agak melompat sedikit dari materi dasar Vue. PrimeVue adalah library yang bisa gunakan untuk memperindah tampilan aplikasi vue yang kita buat. PrimeVue menyediakan banyak component yang siap kita gunakan untuk membangun aplikasi. Berikut ini adalah langkah-langkah untuk memasang PrimeVue pada project Vue yang buat.

Pertama, kita harus punya project vue terlebih dahulu. Aku tidak akan menjelaskan bagaimana cara membuat project vue, teman-teman bisa melihat tulisanku sebelumnya untuk membuat project vue. Jika sudah punya, selanjutnya kita install library primevue menggunakan npm dengan perintah sebagai berikut

npm install primevue @primeuix/themes

Jika berhasil maka akan muncul tampilan seperti berikut ini.

Menggunakan PrimeVue di main.ts

Jika sudah terpasang, selanjutnya kita harus melakukan konfigurasi di file main.ts. Berikut ini adalah contoh konfigurasi yang bisa kita gunakan

import { createApp } from 'vue'
import PrimeVue from 'primevue/config';
import Aura from '@primeuix/themes/aura';
import App from './App.vue';

const app = createApp(App);
app.use(PrimeVue, {
    theme: {
        preset: Aura,
        options: {
            prefix: 'p',
            darkModeSelector: 'light',
            cssLayer: false
        }
    }
});
app.mount("#app");

Nah, pada contoh di atas sebelum kita melakukan mount #app kita terlebih dahulu menggunakan app.use(PrimeVue). Begitulah cara menggunakan PrimeVue. Di dalam use, parameter kedua berisi konfigurasi dasar PrimeVue. Pada konfigurasi dasar itu kita menggunakan tema Aura dengan preset: Aura. Selain Aura ada 3 theme lagi yang bisa kita gunakan yaitu Lara, Nora dan Material.

Contoh Menggunakan PrimeVue Sederhana

Sekarang mari kita coba membuat contoh menggunakan PrimeVue yang sederhana. Kita coba membuat login form dengan PrimeVue.

<script setup lang="ts">
import Button from 'primevue/button';
import InputText from 'primevue/inputtext';
import Card from 'primevue/card';
</script>

<template>
  <Card class="custom-card">
    <template #title>Login Form</template>
    <template #content>
      <InputText name="username" type="text" placeholder="Username" />
      <InputText name="email" type="password" placeholder="Pasword" />
      <Button type="submit" severity="warn" label="Login" />
    </template>
  </Card>
</template>

<style scoped>
</style>

Berikut adalah hasil dari komponen di atas.

Nah, dengan prime vue, kita bisa menghasilkan tampilan yang lebih baik dan lebih mudah. Pada contoh di atas, kita baru menggunakan 3 component, yaitu Card, InputText dan Button. Masih banyak sekali komponen yang bisa kita gunakan di prime vue. PrimeVue sudah menyediakan dokumentasi terkait component-component apa saja yang bisa digunakan dan bagaimana cara mengunanakannya.

Mengubah Style Component

Dengan PrimeVue kita bisa mengubah style component secara global. Caranya kita harus menggunakan yang namanya definePreset. Mari kita coba untuk mengubah semua tombol menjadi round.

import { createApp } from 'vue'
import PrimeVue from 'primevue/config';
import Aura from '@primeuix/themes/aura';
import App from './App.vue';
import {definePreset} from "@primeuix/themes";
import type {Preset} from "@primeuix/themes/types";

const app = createApp(App);
const CustomPreset: Preset = definePreset(Aura, {
    components: {
        button: {
            root: {
                borderRadius: "50px"
            }
        }
    }
});

app.use(PrimeVue, {
    theme: {
        preset: CustomPreset,
        options: {
            prefix: 'p',
            darkModeSelector: 'light',
            cssLayer: false
        }
    }
});
app.mount("#app");

Pada contoh di atas, kita membuat variable bernama CustomPreset yang nilianya diperoleh menggunakan definePreset. Fungsi definePreset membutuhkan 2 parameter, yaitu basePreset (tema bawaan) dan customizations. Pada contoh di atas basePreset yang kita gunakan adalah Aura. Customizations yang kita gunakan berbentuk object. Object tersebut mengarah ke components, lalu masuk ke button, selanjutnya root dan baru property yang akan kita set.

Pada contoh di atas, kita mengubah style dari root button, artinya property style yang kita buat mentarget element root button. Nah, di dalam button itu terdapat beberapa element, contohnya label dan icon. Jika kita ingin mengubah labelnya, kita bisa mentarget labelnya dengan cara seperti ini.

const CustomPreset: Preset = definePreset(Aura, {
    components: {
        button: {
            root: {
                borderRadius: "50px",
                label: {
                    fontWeight: "bold",
                }
            },

        },
    }
});

Pada contoh di atas, kita tambahkan label di dalam root, dan kita ubah font weightnya menjadi bold. Hasil dari preset di atas akan menjadi seperti ini:

Jika kita perhatikan label pada button kita sekarang menjadi bold. Sayangnya untuk label, kita hanya bisa menggunakan fontWeight saja. Kita tidak bisa melakukan custom yang lain.

Penutup

Nah, demikianlah cara memasang dan menggunakan primeVue, kedepan kita akan membahas cara-cara membuat sesuatu yang menarik dengan vue dan primevue. Apa saja yang menarik? lihat saja nanti ya, karena sekarang masih belum terpikirkan. 🤣