Bir önceki Nuxt yazımızda kendi özel rotalarımızı nasıl yazabileceğimizi görmüştük. Şimdi güncel Bootstrap sürümünü entegre etmeye çalışacağız.
Öncelikle projeyi oluşturalım.
|
1 |
npx nuxi@latest init nuxt3-bootstrap |
Ardından cd nuxt3-bootstrap ile proje dizinimize girelim ve aşağıdaki komutlarla gerekli bağımlılıklarımızı ekleyelim.
Bu aşamada istediğiniz özel bir bootstrap sürümünü projeye dahil edebilirsiniz. Sadece ilgili sürümün jQuery barındırmayan yeni sürümlerden biri olmasına dikkat etmeniz yeterli.
|
1 2 |
npm install bootstrap npm install -D @types/bootstrap sass |
Bu işlem bittikten sonra plugins dizini altında bootstrap.client.ts adında bir dosya oluşturalım. Dosyanın içeriğini aşağıdaki gibi doldurun.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
import { Alert, Button, Carousel, Collapse, Dropdown, Modal, Offcanvas, Popover, ScrollSpy, Tab, Toast, Tooltip } from "bootstrap"; export default defineNuxtPlugin(() => ({ provide: { bootstrap: { Alert, Button, Carousel, Collapse, Dropdown, Modal, Offcanvas, Popover, ScrollSpy, Tab, Toast, Tooltip }, }, })); |
Böylelikle Bootstrap içinde var olan JavaScript modüllerini kullanabilir olduk.
Şimdi aşağıdaki gibi 2 SCSS dosyası oluşturalım.
assets/styles/app.scss dosyası oluşturun ve aşağıdaki içeriği ekleyin.
|
1 2 3 |
@import "bootstrap/scss/bootstrap"; @import "custom"; |
assets/styles/custom.scss dosyası oluşturun ve aşağıdaki içeriği ekleyin.
|
1 2 3 |
body { background-color: aliceblue; } |
Şimdi nuxt.config.ts dosyamızı açalım ve aşağıdaki eklemeyi yapalım.
|
1 2 3 4 5 6 |
// https://nuxt.com/docs/api/configuration/nuxt-config export default defineNuxtConfig({ // ... css: ["~/assets/styles/app.scss"], // ... }) |
Son olarak yaptıklarımızın çalışıp çalışmadığını görelim.
app.vue dosyamızı açalım ve içeriğini aşağıdaki gibi değiştirelim.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<template> <div> <button class="btn btn-primary" @click="toggle()">Modal Aç</button> <div class="modal fade" ref="modal_main" id="modal-main"> <div class="modal-dialog modal-dialog-centered" style="max-width: 600px"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Merhaba Dünya!</h5> <button class="btn-close" data-bs-dismiss="modal" aria-label="Close" ></button> </div> <div class="modal-body p-4">...</div> <div class="modal-footer"> <button class="btn btn-outline-secondary" data-bs-dismiss="modal">Kapat</button> </div> </div> </div> </div> </div> </template> <script setup lang="ts"> import type { Modal } from "bootstrap"; const { $bootstrap } = useNuxtApp(); let modal: Modal; onMounted(() => { modal = new $bootstrap.Modal(document.getElementById("modal-main")); }); const toggle = () => { modal.toggle(); }; </script> |
Gördüğünüz gibi Bootstrap entegrasyonumuz tamamlandı ve modal açıldı. Bir önceki Nuxt 3 İçinde Custom Route Kullanımı başlıklı yazdıdaki adımları da uygulayarak kendinize özgü rotaları oluşturup Bootstrap ile yeni bir projeye başlayabilirsiniz.
Faydalı olması dileğiyle..
Bir sonraki yazıda görüşmek üzere.
İlk Yorumu Siz Yapın