Panduan Menginstal Tailwind CSS Dengan Nuxt.js Dan Flowbite
Framework ini di inspirasi oleh framework Next.js Vercel yang dibuat dengan React dan digunakan oleh perusahaan besar seperti Ecosia, Upwork, NASA, Appsumo, dan CDN JS.
Jika Anda mengikuti tutorial ini, Anda akan belajar langkah memasang Nuxt.js versi 3 terkini dengan Tailwind CSS dan Flowbite dan memperlihatkan langkah menggunakan versi TypeScript.
Buat proyek Nuxt.js
Saat sebelum meneruskan, yakinkan Anda sudah memasang Node.js dan NPM di local machine Anda.
Buat proyek Nuxt.js baru dengan menjalankan perintah berikut di terminal Anda:
npx nuxi init project-nameInstal dependensi proyek dengan menjalankan perintah berikut:
npm installJalankan perintah berikut untuk memulai server pengembangan lokal di http://localhost:3000/:
npm run devIni akan membuat proyek Nuxt.js dapat diakses melalui browser.
Pasang Tailwind CSS
Sekarang setelah Anda menyiapkan proyek Nuxt.js secara lokal, kami akan melanjutkan dengan menginstal Tailwind CSS.
Memperlukan untuk menginstal modul NuxtTailwind dengan menginstalnya melalui NPM:
npm install --save-dev @nuxtjs/tailwindcssKonfigurasikan file konfigurasi Nuxt.js untuk menyertakan modul Tailwind:
// nuxt.config.{js,ts}
export default defineNuxtConfig({
modules: [
'@nuxtjs/tailwindcss'
]
})Buat sebuah file tailwind.config.js dengan menjalankan perintah berikut:
npx tailwindcss initBuat file CSS baru ./assets/css/input.css dan impor direktif Tailwind CSS utama:
@tailwind base;
@tailwind components;
@tailwind utilities;Persiapkan track template untuk proyek Nuxt.js Anda dalam file konfigurasi Tailwind CSS:
module.exports = {
content: [
"./components/**/*.{js,vue,ts}",
"./layouts/**/*.vue",
"./pages/**/*.vue",
"./plugins/**/*.{js,ts}",
"./nuxt.config.{js,ts}",
],
theme: {
extend: {},
},
plugins: [],
}Tailwind CSS saat ini dikonfigurasi di project Anda apabila Anda menambahkan kelas utilitas dimanapun di file template Vue Anda, CSS akan dibuat dan disertakan.
Instal Flowbite
Sesudah memasang Nuxt.js dan Tailwind CSS dalam project Anda, kami bisa melanjutkan dengan memasang Flowbite.
Instal Flowbite melalui NPM dan simpan di file package.json Anda:
npm install flowbiteWajibkan Flowbite sebagai plugin di dalam file tailwind.config.js Anda:
module.exports = {
// other options ...
plugins: [
require('flowbite')
],
}Tambahkan file JavaScript sumber Flowbite ke track template tailwind.config.js:
module.exports = {
content: [
// other files...
"./node_modules/flowbite.{js,ts}"
],
}Komponen Flowbite
Saat ini sesudah Anda sukses memasang Nuxt.js, Tailwind CSS, dan Flowbite, Anda mulai dapat mengimpor dan menggunakan komponen dari pustaka Flowbite sumber terbuka seperti modals, navbars, tabel, dropdown, dan yang lain.
Silahkan pakai komponen Modal sebagai contoh dan salin-tempel markup dari dokumentasi dalam halaman app.vue Anda:
<template>
<div>
<div class="flex justify-center p-4">
<button id="button" data-modal-toggle="modal" data-modal-target="modal" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">Show modal</button>
</div>
<div id="modal" tabindex="-1" aria-hidden="true" class="fixed top-0 left-0 right-0 z-50 hidden w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-modal md:h-full">
<div class="relative w-full h-full max-w-2xl md:h-auto">
<!-- Modal content -->
<div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
<!-- Modal header -->
<div class="flex items-start justify-between p-5 border-b rounded-t dark:border-gray-600">
<h3 class="text-xl font-semibold text-gray-900 lg:text-2xl dark:text-white">
Terms of Service
</h3>
<button id="closeButton" data-modal-hide="modal" type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
</div>
<!-- Modal body -->
<div class="p-6 space-y-6">
<p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply.
</p>
<p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as possible of high-risk data breaches that could personally affect them.
</p>
</div>
<!-- Modal footer -->
<div class="flex items-center p-6 space-x-2 border-t border-gray-200 rounded-b dark:border-gray-600">
<button type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">I accept</button>
<button type="button" class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600">Decline</button>
</div>
</div>
</div>
</div>
</div>
</template>Atribut data
Anda dapat secara otomatis membuat komponen interaktif berfungsi dengan mengimpor fungsi ini dari package Flowbite menggunakan sistem life cycle onMounted dari Nuxt.js.
Misalkan, berikut langkah menginisialisasi semua modal dalam template Vue Anda:
<script setup>
import { onMounted } from 'vue'
import { initModals } from 'flowbite'
// initialize components based on data attribute selectors
onMounted(() => {
initModals();
})
</script>
<template>
// Modal HTML markup with data attributes from Flowbite
</template>Berikut daftar lengkap fungsi yang tersedia untuk digunakan untuk menginisialisasi komponen:
<script setup>
import { onMounted } from 'vue'
import {
initAccordions,
initCarousels,
initCollapses,
initDials,
initDismisses,
initDrawers,
initDropdowns,
initDropdowns,
initModals,
initPopovers,
initTabs,
initTooltips } from 'flowbite'
// initialize components based on data attribute selectors
onMounted(() => {
initAccordions();
initCarousels();
initCollapses();
initDials();
initDismisses();
initDrawers();
initDropdowns();
initModals();
initPopovers();
initTabs();
initTooltips();
})
</script>Meskipun ini akan memastikan semua komponen interaktif akan bekerja dengan atribut data dari Flowbite, kami sebetulnya merekomendasikan cuma melakukan inisialisasi yang Anda gunakan untuk tiap halaman buat mengoptimalkan kecepatan pemuatan.
Lihat file Events.vue panduan pemula untuk menyaksikannya beraksi.
API JavaScript
Untuk membikin komponen jadi interaktif, kita perlu mengimpor object Modal dari Flowbite dan atur parameter object, pilihan, dan sistem untuk menampilkan atau sembunyikan modal berdasar klik tombol.
<script setup>
import { onMounted } from 'vue'
import { Modal } from 'flowbite'
onMounted(() => {
// setup available elements
const $buttonElement = document.querySelector('#button');
const $modalElement = document.querySelector('#modal');
const $closeButton = document.querySelector('#closeButton');
// set modal options
const modalOptions = {
backdropClasses: 'bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40'
}
// create a new modal instance
if ($modalElement) {
const modal = new Modal($modalElement, modalOptions);
// set event listeners for the button to show the modal
$buttonElement.addEventListener('click', () => modal.toggle());
$closeButton.addEventListener('click', () => modal.hide());
}
})
</script>Sama seperti yang Anda saksikan, kami menggunakan sistem transisi hidup onMounted() dari Vue 3 untuk minta komponen yang kami butuhkan untuk membuat komponen modal dan secara terprogram menggunakan sistem seperti menampilkan atau sembunyikan modal.
// add your own logic and then show the modal
modal.show();
// or you can hide it
modal.hide();Tiap halaman komponen interaktif yang membutuhkan JavaScript memiliki dokumentasi di Flowbite yang menunjukkan ke Anda parameter, pilihan, dan sistem yang ada yang bisa Anda gunakan.
Menggunakan type
Flowbite memberikan dukungan TypeScript mulai v1.6.0 dan memungkinkannya kita menggunakan deklarasi type dan interface untuk object, parameter, dan nilai pilihan untuk JavaScript API.
Anda bisa mengimpor tipe interface semacam ini:
import { Modal } from 'flowbite'
import type { ModalOptions, ModalInterface } from 'flowbite'
// other codePada umumnya, semua komponen memiliki pengertian interface yang bisa Anda pakai kapan saja Anda membuat object baru untuk memastikan jika Anda menggunakan type parameter dan sistem yang tepat.
Saat membuat modal baru, Anda bisa menyetel ModalInterface sebagai type khusus:
const modal: ModalInterface = new Modal($modalElement, modalOptions);Semua komponen Flowbite juga mendukung deklarasi tipe untuk objek opsi. Ini contohnya:
const modalOptions: ModalOptions = {
placement: 'top-right'
}
const modal: ModalInterface = new Modal($modalElement, modalOptions);Menggunakan type can sangat berguna karena memastikan jika Anda cuma menggunakan type dan nilai yang dibolehkan untuk pilihan yang ada. Misalkan, bila Anda menggunakan nilai seperti yellow untuk object penempatan, yang disebut warna, TipeScript akan memunculkan kesalahan karena tidak penuhi syarat tipe dari Flowbite.
Berikut kode komplit menggunakan type dengan TipeScript:
import { Modal } from 'flowbite'
import type { ModalOptions, ModalInterface } from 'flowbite'
const $buttonElement: HTMLElement = document.querySelector('#button');
const $modalElement: HTMLElement = document.querySelector('#modal');
const modalOptions: ModalOptions = {
placement: 'top-right'
}
const modal: ModalInterface = new Modal($modalElement, modalOptions);
$buttonElement.addEventListener('click', () => modal.toggle());
modal.show();Selanjutnya mengenai menggunakan Flowbite dengan TypeScript di halaman document resmi.
Project Pemula Nuxt.js
Kami sudah membuat project pemula Tailwind CSS dan Nuxt.js sumber terbuka dan gratis yang tampilkan semua komponen UI interaktif dari Flowbite untuk membantu Anda mulai membuat program situs.
Library Flowbite Vue
Kami mulai mengerjakan pustaka komponen UI Flowbite Vue 3 mandiri yang saat diluncurkan dalam versi konstan bisa menjadi langkah yang direferensikan untuk bekerja di lingkungan Vue 3 atau Nuxt.js. Kontribusi benar-benar diharap!