Learn Nuxt with a Collection of 100+ Tips!

use-bootstrap
use-bootstrap

This module is a wrapper to front-end framework based on Nuxt3 and Bootstrap5

Welcome to use-bootstrap! 👋😁

main1

Documentation 📗

We recommend browsing the official site here. The official site provides actual working documentation and examples.

ja:こちらの公式サイトを閲覧する事をオススメします。公式サイトでは実際に動作するドキュメントや実装例を掲載しています。(日本語対応してます ✨)

Installation 🔧

Installation of Bootstrap5 and use-bootstrap NPM Package

npx nuxi@latest module add usebootstrap

Add a usebootstrap section in your nuxt.config.

export default defineNuxtConfig({
  modules: [
    'usebootstrap'
    ],
})

Concept 🎤

use-bootstrap is the front-end framework based on Nuxt3 and Bootstrap5.

  • Extended Bootstrap5 SCSS
  • Pure Vue.js Scripts
  • Support for UnoCSS, nuxt-link, nuxt-image, nuxt-icon, and more...
  • Seamless Integration of UI and Data
  • Unified Color Management
  • Static_Fragment_Generator

Components

  • Accordion
  • Alerts
  • Badge
  • Breadcrumb
  • Buttons
  • Button group
  • Card
  • Carousel
  • Close button
  • Collapse
  • Dropdown
  • List group
  • Modal
  • Navbar
  • Navs and Tabs
  • Offcanvas
  • Pagination
  • Placeholders
  • Popovers
  • Progress
  • Scrollspy
  • Spinners
  • Toasts
  • Tooltips
  • Range

Modules

  • VueUse
  • Icons
  • Fonts
  • Animate.css
  • Sitemap
  • Robots
  • UnoCSS
  • Leaflet Map
  • Markdown

Extend Components

  • Grid template
  • Color mode
  • Localization
  • Sidebar
  • Table of Contents (Toc)
  • Code highlighter
  • Intro
  • Typed
  • Swiper
  • Divider
  • Status Indicator
  • Icon Box
  • Avatar
  • Intersection Animate
  • Back to top
  • Responsive Divider
  • Json View
  • Password Strength
  • Tiptap Editor
  • Sortable

Integration Components

  • ViewState
  • ActionState

For a detailed description click here.

License 📄

Code released under the MIT License.

Member 👾