Tutorial Vue 3 dan Laravel 11 #2: Install Bootsrap, Toastify, SweetAlert & PrimeVue sebagai UI pada Vue 3

Tutorial Vue 3 dan Laravel 11 #2: Install Bootsrap, Toastify, SweetAlert & PrimeVue sebagai UI pada Vue 3

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

Step 1: Install  Bootstraap, Toastify Js, SweetAlert & PrimeVue Menggunakan Node Js

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

Step 2: Konfigurasi App

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

 

Step 3 : Tahap Pengujian

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

Vue 3 Vite Js sobatcoding.com

 

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.