sobatcoding.com - Tutorial install Bootstrap, Notify Js, SweetAlert & PrimeVue sebagai UI pada Vue 3
Artikel kali ini kita akan mencoba mengintall beberapa dependencies seperti PrimeVue, Bootstrap, Notify, SweetAlert untuk menunjang tampilan UI nya nanti agar terlihat lebih menarik
Masuk ke command prompt dan jalankan peintah berikut
npm install bootstrap
npm install vue3-toastify
npm install sweetalert2
npm install primevue
npm install @primevue/themes
npm install @primevue/core
Kita jalankan satu satu perintah instalasi atau kita bisa install sekaligus mengguakan perintah berikut
npm install bootstrap vue3-toastify sweetalert2 primevue @primevue/core @primevue/themes
Silahkan kalian buka file main.ts di folder vue3-vite-laravel, kemudian register bootstrap dan primevue dengan cara seperti berikut
/** Prime Vue **
import PrimeVue from 'primevue/config'
import Aura from '@primevue/themes/aura'
/** Bootsrap */
import "bootstrap/dist/css/bootstrap.min.css"
import * as bootstrap from 'bootstrap'
kemudian pada createApp tambahkan kode seperti berikut
createApp(App).use(PrimeVue, {
theme: {
preset: Aura,
options: {
prefix: 'p',
darkModeSelector: 'system',
cssLayer: false
}
}
}).mount('#app')
Full code seperti berikut
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import PrimeVue from 'primevue/config'
import Aura from '@primevue/themes/aura'
/** Bootsrap */
import "bootstrap/dist/css/bootstrap.min.css"
import * as bootstrap from 'bootstrap'
createApp(App).use(PrimeVue, {
theme: {
preset: Aura,
options: {
prefix: 'p',
darkModeSelector: 'system',
cssLayer: false
}
}
}).mount('#app')
Silahkan kalian buka file App.vue di folder vue3-vite-laravel. Kita ubah beberapa component seperti berikut
<script setup lang="ts">
import Swal from 'sweetalert2'
import { toast } from 'vue3-toastify'
import 'vue3-toastify/dist/index.css'
const swal = () => {
Swal.fire({
icon: 'info',
title: 'Informasi',
text: 'Hai, Anda telah menekan tombol klik',
confirmButtonColor: "#fe5d70",
})
}
const notify = function(message: string, status: string) {
toast(message, {
"theme": "colored",
"type": status,
"position": "top-center",
"pauseOnFocusLoss": false,
"hideProgressBar": true,
"autoClose": 2000,
"transition": "slide",
"dangerouslyHTMLString": true
})
}
</script>
<template>
<div class="container">
<h1>Vue 3 With Bootstrap 5, PrimeVue, Notify Js dan SweetAlert</h1>
<br>
<h4>Button Small Bootsrap 5</h4>
<div class="card card-body shadow mb-5">
<div class="row">
<div class="col"><button class="btn btn-primary btn-sm">Primary</button></div>
<div class="col"><button class="btn btn-secondary btn-sm">Secondary</button></div>
<div class="col"><button class="btn btn-light btn-sm">Light</button></div>
<div class="col"><button class="btn btn-warning btn-sm">Warning</button></div>
<div class="col"><button class="btn btn-info btn-sm">Info</button></div>
<div class="col"><button class="btn btn-danger btn-sm">Danger</button></div>
</div>
</div>
<h4>Sweet Alert</h4>
<div class="card card-body shadow mb-5">
<div class="row">
<div class="col"><button class="btn btn-success btn-sm" @click="swal">Klik Sweet Alert</button></div>
</div>
</div>
<h4>Notify Js</h4>
<div class="card card-body shadow mb-5">
<div class="row">
<div class="col"><button class="btn btn-info btn-sm" @click="notify('Hello', 'success')">Notif Me</button></div>
</div>
</div>
</div>
</template>
Hasil dari kode di atas seperti berikut
Sekian tutorial kali ini. Semoga bermanfaat.
Jika teman-teman memiliki pertanyaan atau saran mengenai artikel ini, jangan ragu untuk meninggalkan komentar pada form di bawah ini.
Komentar 0