https://github.com/modbender/nuxt-bootstrap-css
Quite the hassle to setup bootstrap, so here is the shortcut
https://github.com/modbender/nuxt-bootstrap-css
Last synced: 5 months ago
JSON representation
Quite the hassle to setup bootstrap, so here is the shortcut
- Host: GitHub
- URL: https://github.com/modbender/nuxt-bootstrap-css
- Owner: modbender
- License: mit
- Created: 2024-03-08T15:46:23.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-03-12T10:14:17.000Z (about 2 years ago)
- Last Synced: 2024-04-14T08:02:59.168Z (about 2 years ago)
- Language: Vue
- Size: 114 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
Nuxt Bootstrap CSS
Complete Bootstrap integration, instant, no config, full CSS server side, full javascript client side.
-----
- [📖 Official Bootstrap Documentation](https://getbootstrap.com/docs/5.3/getting-started/introduction/)
- [🏀 Online playground](https://stackblitz.com/github/modbender/nuxt-bootstrap-css?file=playground%2Fapp.vue)
- [✨ Release Notes](/CHANGELOG.md)
## Features
- 📦 Instant Bootstrap Integration, No Config Required
- 🪶 No Decrease in Performance, Javascript injected to client side
- 🎉 Everything from Bootstrap available
- 🕶️ Dark Mode support
## Quick Setup
1. Add `nuxt-bootstrap-css` dependency to your project
```bash
# Using pnpm
pnpm add -D nuxt-bootstrap-css
# Using yarn
yarn add --dev nuxt-bootstrap-css
# Using npm
npm install --save-dev nuxt-bootstrap-css
```
2. Add `nuxt-bootstrap-css` to the `modules` section of `nuxt.config.ts`
```js
export default defineNuxtConfig({
modules: [
'nuxt-bootstrap-css'
]
})
```
3. Start designing your webpage using Bootstrap classes. Full `bootstrap` javascript and `@popper/core` is already imported.
```xml
Dropdown button
...
...
...
...
```
That's it! You can now use Nuxt Bootstrap CSS in your Nuxt app ✨
## Dark Mode
Bootstrap 5.3 introduced [Dark Mode](https://getbootstrap.com/docs/5.3/customize/color-modes/#dark-mode).
Simply by adding attribute `data-bs-theme` to any element with value `light` or `dark` you can manipulate it's theme.
Bootstrap 5.3 is already pre-configured with `light` and `dark` theme variables. But you can always create custom themes with custom variables to switch colors.
With `color-mode` it's easy to configure Dark Mode for bootstrap.
```js
colorMode: {
dataValue: 'bs-theme',
classSuffix: ''
}
```
## Development
```bash
# Install dependencies
pnpm install
# Generate type stubs
pnpm run dev:prepare
# Develop with the playground
pnpm run dev
# Build the playground
pnpm run dev:build
# Run ESLint
pnpm run lint
# Run Vitest
pnpm run test
pnpm run test:watch
# Release new version
npm run release
```