use-bootstrap

https://usebootstrap.org/lang-en
Admin
use-bootstrap is a front-end framework built with Nuxt3 and Bootstrap5, providing a starter template...
Tokens:277,595
Snippets:939
Trust Score:6.4
Update:1 year ago
Show doc for...
Tokens:
Raw
### Clean Install and Setup

Source: https://usebootstrap.org/lang-en/index

Commands for performing a clean installation of Nuxt.js and adding the use-bootstrap module to your project.

```bash
npx nuxi@latest init project-name
```

```bash
npx nuxi@latest module add usebootstrap
```

--------------------------------

### Bootstrap Utility: start

Source: https://usebootstrap.org/lang-en/getting-started/props

Provides utility for Position in Bootstrap. Refer to the official documentation for detailed usage and examples.

```Bootstrap
start
```

--------------------------------

### Vue Grid Start Classes Example

Source: https://usebootstrap.org/lang-en/layout/css-grid

Demonstrates the use of 'start' classes to control column positioning, acting as shorthands for CSS Grid's `column-start` property to align columns.

```vue
<template>
 <Grid>
  <GridCol
   :size="3"
   :colmun-start="2"
  >
   .g-col-3 .g-start-2
  </GridCol>
  <GridCol
   :size="4"
   :colmun-start="6"
  >
   >.g-col-4 .g-start-6
  </GridCol>
 </Grid>
</template>

```

--------------------------------

### Vue UseOffsetPagination Example

Source: https://usebootstrap.org/lang-en/extend/modules/vueuse

Demonstrates how to implement offset-based pagination in Vue.js using the UseOffsetPagination composable. It includes setup for data fetching, state management for pagination, and rendering pagination controls and data.

```vue
<script setup lang="ts">
interface User {
 id: number;
 name: string;
}
const database = ref([]) as Ref<User[]>;

for (let i = 0; i < 80;
) database.value.push({ id: i, name: `user ${i}` });

function fetch(page: number, pageSize: number) {
 return new Promise<User[]>((resolve, reject) => {
  const start = (page - 1) * pageSize;
  const end = start + pageSize;
  setTimeout(() => {
   resolve(database.value.slice(start, end));
  }, 100);
 });
}

const data: Ref<User[]> = ref([]);

const page = ref(1);
const pageSize = ref(10);

fetchData({
 currentPage: page.value,
 currentPageSize: pageSize.value,
});

function fetchData({ currentPage, currentPageSize }: { currentPage: number; currentPageSize: number }) {
 fetch(currentPage, currentPageSize).then((responseData) => {
  data.value = responseData;
 });
}
</script>

<template>
 <UseOffsetPagination
  v-slot="{
   currentPage,
   currentPageSize,
   next,
   prev,
   pageCount,
   isFirstPage,
   isLastPage,
  }"
  :total="database.length"
  @page-change="fetchData"
  @page-size-change="fetchData"
 >
  <Grid
   :columns="2"
   display="inline-grid"
  >
   <div opacity="50">
    total:
   </div>
   <div>{{ database.length }}</div>
   <div opacity="50">
    pageCount:
   </div>
   <div>{{ pageCount }}</div>
   <div opacity="50">
    currentPageSize:
   </div>
   <div>{{ currentPageSize }}</div>
   <div opacity="50">
    currentPage:
   </div>
   <div>{{ currentPage }}</div>
   <div opacity="50">
    isFirstPage:
   </div>
   <div>{{ isFirstPage }}</div>
   <div opacity="50">
    isLastPage:
   </div>
   <div>{{ isLastPage }}</div>
  </Grid>
  <div>
   <b-button
    :disabled="isFirstPage"
    color="outline-primary"
    @click="prev"
   >
    prev
   </b-button>
   <b-button
    :disabled="isLastPage"
    color="outline-primary"
    @click="next"
   >
    next
   </b-button>
  </div>
 </UseOffsetPagination>
 <b-table
  small
  striped
 >
  <thead>
   <tr>
    <td>id</td>
    <td>name</td>
   </tr>
  </thead>
  <tbody>
   <tr
    v-for="d in data"
    :key="d.id"
   >
    <td>{{ d.id }}</td>
    <td>{{ d.name }}</td>
   </tr>
  </tbody>
 </b-table>
</template>

```

--------------------------------

### Basic Bootstrap Input Group Examples

Source: https://usebootstrap.org/lang-en/forms/input-group

Demonstrates various configurations of Bootstrap input groups using Vue.js components. Includes examples for placing addons on either side, using currency symbols, and integrating textareas.

```vue
<template>
 <BInputGroup margin="b-3">
  <BInputGroupText id="basic-addon1">
   @
  </BInputGroupText>
  <BFormInput
   type="text"
   placeholder="Username"
   aria-label="Username"
   aria-describedby="basic-addon1"
  />
 </BInputGroup>
 <BInputGroup margin="b-3">
  <BFormInput
   type="text"
   placeholder="Recipient's username"
   aria-label="Recipient's username"
   aria-describedby="basic-addon2"
  />
  <BInputGroupText id="basic-addon2">
   @example.com
  </BInputGroupText>
 </BInputGroup>
 <BFormLabel for="basic-url">
  Your vanity URL
 </BFormLabel>
 <BInputGroup margin="b-3">
  <BInputGroupText>https://example.com/users/</BInputGroupText>
  <BFormInput
   id="basic-url"
   type="text"
   aria-describedby="basic-addon3"
  />
 </BInputGroup>
 <BInputGroup margin="b-3">
  <BInputGroupText>$</BInputGroupText>
  <BFormInput
   type="text"
   aria-label="Amount (to the nearest dollar)"
  />
  <BInputGroupText>.00</BInputGroupText>
 </BInputGroup>
 <BInputGroup margin="b-3">
  <BFormInput
   type="text"
   placeholder="Username"
   aria-label="Username"
  />
  <BInputGroupText>@</BInputGroupText>
  <BFormInput
   type="text"
   placeholder="Server"
   aria-label="Server"
  />
 </BInputGroup>

 <BInputGroup margin="b-3">
  <BInputGroupText>With textarea</BInputGroupText>
  <BFormTextarea aria-label="With textarea" />
 </BInputGroup>
</template>

```

--------------------------------

### Simple Bar Chart Example

Source: https://usebootstrap.org/lang-en/extend/components/chart-bar

Demonstrates how to display a simple bar chart using the BarChart component. It includes setup for dimensions, source data, and series configuration in Vue.js.

```vue
<script setup>
function random() {
 return Math.round(300 + Math.random() * 700) / 10;
}
const dimensions = ref(['Product', 2015, 2016, 2017]);
const source = ref([
 {
  Product: 'Matcha Latte',
  2015: random(),
  2016: random(),
  2017: random(),
 },
 {
  Product: 'Milk Tea',
  2015: random(),
  2016: random(),
  2017: random(),
 },
 {
  Product: 'Cheese Cocoa',
  2015: random(),
  2016: random(),
  2017: random(),
 },
 {
  Product: 'Walnut Brownie',
  2015: random(),
  2016: random(),
  2017: random(),
 },
]);
const series = ref([{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]);
</script>

<template>
 <BarChart
  class="un-h-20em un-w-40em"
  :dimensions="dimensions"
  :source="source"
  :series="series"
 />
</template>

```

--------------------------------

### Vue Avatar Ratio Examples

Source: https://usebootstrap.org/lang-en/extend/components/avatar

Demonstrates using the Avatar component in Vue.js with various 'ratio' props to control the aspect ratio of the image. Includes examples with different 'size' props.

```vue
<template>
 <Avatar
  size="h1"
  ratio="4x3"
  img-src="https://placehold.jp/400x300.png"
  img-alt="Image Description"
 />
 <Avatar
  size="h2"
  ratio="4x3"
  img-src="https://placehold.jp/400x300.png"
  img-alt="Image Description"
 />
 <Avatar
  size="lg"
  ratio="4x3"
  img-src="https://placehold.jp/400x300.png"
  img-alt="Image Description"
 />
 <Avatar
  ratio="4x3"
  img-src="https://placehold.jp/400x300.png"
  img-alt="Image Description"
 />
 <Avatar
  size="sm"
  ratio="4x3"
  img-src="https://placehold.jp/400x300.png"
  img-alt="Image Description"
 />
</template>
```

--------------------------------

### Vue Navbar Component Examples with Theming

Source: https://usebootstrap.org/lang-en/components/navbar

Demonstrates the usage of the BootstrapVue Navbar component with different theming options. It showcases how to apply dark and light themes, as well as custom background colors using props like `theme` and `background-color`. The examples include navigation links, dropdowns, and a search form.

```vue
<template>
 <Navbar
  expand="lg"
  theme="dark"
  background-color="dark"
  border="botton bottom-dark"
 >
  <Container type="fluid">
   <NavbarBrand>Navbar</NavbarBrand>
   <NavbarToggler />
   <NavbarCollapse>
    <NavbarNavList margin="e-auto b-2 b-lg-0">
     <NavItem>
      <NavLink active>
       Home
      </NavLink>
     </NavItem>
     <NavItem>
      <NavLink to="/lang-en/components/navbar/">
       Link
      </NavLink>
     </NavItem>
     <NavItemDropdown>
      <NavItemDropdownToggle>Dropdown</NavItemDropdownToggle>
      <DropdownMenu>
       <DropdownItem>Action</DropdownItem>
       <DropdownItem to="/lang-en/components/navbar/">
        Another action
       </DropdownItem>
       <DropdownItemDivider />
       <DropdownItem>Something else here</DropdownItem>
      </DropdownMenu>
     </NavItemDropdown>
     <NavItem>
      <NavLink disabled>
       Disabled
      </NavLink>
     </NavItem>
    </NavbarNavList>
    <BForm
     flex
     role="search"
    >
     <BFormInput
      margin="e-2"
      type="search"
      placeholder="Search"
     />
     <b-button
      color="outline-light"
      type="submit"
     >
      Search
     </b-button>
    </BForm>
   </NavbarCollapse>
  </Container>
 </Navbar>
 <Navbar
  expand="lg"
  theme="dark"
  background-color="primary"
 >
  <Container type="fluid">
   <NavbarBrand>Navbar</NavbarBrand>
   <NavbarToggler />
   <NavbarCollapse>
    <NavbarNavList margin="e-auto b-2 b-lg-0">
     <NavItem>
      <NavLink active>
       Home
      </NavLink>
     </NavItem>
     <NavItem>
      <NavLink to="/lang-en/components/navbar/">
       Link
      </NavLink>
     </NavItem>
     <NavItemDropdown>
      <NavItemDropdownToggle>Dropdown</NavItemDropdownToggle>
      <DropdownMenu>
       <DropdownItem>Action</DropdownItem>
       <DropdownItem to="/lang-en/components/navbar/">
        Another action
       </DropdownItem>
       <DropdownItemDivider />
       <DropdownItem>Something else here</DropdownItem>
      </DropdownMenu>
     </NavItemDropdown>
     <NavItem>
      <NavLink disabled>
       Disabled
      </NavLink>
     </NavItem>
    </NavbarNavList>
    <BForm
     flex
     role="search"
    >
     <BFormInput
      margin="e-2"
      type="search"
      placeholder="Search"
     />
     <b-button
      color="outline-light"
      type="submit"
     >
      Search
     </b-button>
    </BForm>
   </NavbarCollapse>
  </Container>
 </Navbar>
 <Navbar
  expand="lg"
  theme="light"
  style="background-color: #e3f2fd;"
 >
  <Container type="fluid">
   <NavbarBrand>Navbar</NavbarBrand>
   <NavbarToggler />
   <NavbarCollapse>
    <NavbarNavList margin="e-auto b-2 b-lg-0">
     <NavItem>
      <NavLink active>
       Home
      </NavLink>
     </NavItem>
     <NavItem>
      <NavLink to="/lang-en/components/navbar/">
       Link
      </NavLink>
     </NavItem>
     <NavItemDropdown>
      <NavItemDropdownToggle>Dropdown</NavItemDropdownToggle>
      <DropdownMenu>
       <DropdownItem>Action</DropdownItem>
       <DropdownItem to="/lang-en/components/navbar/">
        Another action
       </DropdownItem>
       <DropdownItemDivider />
       <DropdownItem>Something else here</DropdownItem>
      </DropdownMenu>
     </NavItemDropdown>
     <NavItem>
      <NavLink disabled>
       Disabled
      </NavLink>
     </NavItem>
    </NavbarNavList>
    <BForm
     flex
     role="search"
    >
     <BFormInput
      margin="e-2"
      type="search"
      placeholder="Search"
     />
     <b-button
      color="outline-light"
      type="submit"
     >
      Search
     </b-button>
    </BForm>
   </NavbarCollapse>
  </Container>
 </Navbar>
</template>

```

--------------------------------

### Vue Opacity Utility Example

Source: https://usebootstrap.org/lang-en/utilities/opacity

Demonstrates how to control element opacity using Bootstrap Vue's `opacity` utility. It shows examples of setting opacity to 100%, 75%, 50%, and 25% using the `:opacity` prop.

```vue
<template>
 <b-div flex="sm">
  <b-div
   :opacity="100"
   padding="3"
   margin="2"
   background-color="primary"
   text-color="light"
   font-weight="bold"
   rounded
  >
   100%
  </b-div>
  <b-div
   :opacity="75"
   padding="3"
   margin="2"
   background-color="primary"
   text-color="light"
   font-weight="bold"
   rounded
  >
   75%
  </b-div>
  <b-div
   :opacity="50"
   padding="3"
   margin="2"
   background-color="primary"
   text-color="light"
   font-weight="bold"
   rounded
  >
   50%
  </b-div>
  <b-div
   :opacity="25"
   padding="3"
   margin="2"
   background-color="primary"
   text-color="light"
   font-weight="bold"
   rounded
  >
   25%
  </b-div>
 </b-div>
</template>

```

--------------------------------

### Bootstrap Utility: placeholder

Source: https://usebootstrap.org/lang-en/getting-started/props

Provides utility for Placeholders in Bootstrap. Refer to the official documentation for detailed usage and examples.

```Bootstrap
placeholder
```

--------------------------------

### use-bootstrap Starter Repository

Source: https://usebootstrap.org/lang-en/index

Instructions on how to use the use-bootstrap-starter repository as a template to create a new application. This involves starring the GitHub repository and cloning it.

```markdown
## How to Get Started with the Template Repository

The use-bootstrap-starter repository can be used as a template.

This guide explains how to copy the template and create your own application.

Please create and log in to your GitHub account in advance.

If you are developing with StackBlitz, please link your GitHub account to StackBlitz.

### 0. Star the repository on GitHub

The most important first step is to star the GitHub repository.

Open the main repository of use-bootstrap and click the star button.

[use-bootstrap](https://github.com/simplise/use-bootstrap)
```

--------------------------------

### Bootstrap Vue align-content: start Example

Source: https://usebootstrap.org/lang-en/utilities/flex

Demonstrates using the `align-content` attribute with the `start` value in Bootstrap Vue. This aligns flex items together on the cross axis, starting from the beginning. It requires `flex-wrap="wrap"` to show the effect.

```vue
<template>
 <b-div
  flex
  align-content="start"
  flex-wrap="wrap"
  margin="b-3"
  style="height: 200px"
 >
  <b-div padding="2">
   Flex item
  </b-div>
  <b-div padding="2">
   Flex item
  </b-div>
  <b-div padding="2">
   Flex item
  </b-div>
  <b-div padding="2">
   Flex item
  </b-div>
  <b-div padding="2">
   Flex item
  </b-div>
  <b-div padding="2">
   Flex item
  </b-div>
  <b-div padding="2">
   Flex item
  </b-div>
  <b-div padding="2">
   Flex item
  </b-div>
  <b-div padding="2">
   Flex item
  </b-div>
  <b-div padding="2">
   Flex item
  </b-div>
  <b-div padding="2">
   Flex item
  </b-div>
  <b-div padding="2">
   Flex item
  </b-div>
  <b-div padding="2">
   Flex item
  </b-div>
  <b-div padding="2">
   Flex item
  </b-div>
  <b-div padding="2">
   Flex item
  </b-div>
 </b-div>
</template>

```

--------------------------------

### StackBlitz Integration for use-bootstrap

Source: https://usebootstrap.org/lang-en/index

A direct link to open the use-bootstrap starter project on StackBlitz, facilitating quick development and experimentation.

```link
https://stackblitz.com/~/github.com/simplise/use-bootstrap-starter?file=app.vue
```

--------------------------------

### Basic Icon Link

Source: https://usebootstrap.org/lang-en/helpers/icon-link

Shows a basic example of creating an icon link using the Anchor component. It embeds a Bootstrap Icon at the start of the hyperlink.

```vue
<template>
 <Anchor
  to="./focus-ring"
  icon="bi:box-seam"
 >
  Icon link
 </Anchor>
</template>

```

--------------------------------

### Data Synchronization with HTTP Server

Source: https://usebootstrap.org/lang-en/integration/examples/sync

Demonstrates data synchronization patterns using HTTP requests. Includes a JSON schema for data validation, Vue component usage for displaying and inputting synchronized data, and Nuxt configuration for setting up HTTP protocols and synchronization methods.

```json
{
 "valid": false,
 "location": {},
 "summury": {
  "errors": [],
  "keywords": []
 },
 "schema": {}
}
```

```vue
<template>
 <ViewState
  v-slot="user"
  src="reqres-sync://users/5"
  path="data"
  schema-src="app-config://usebootstrap/schemas/basic"
 >
  <Row margin="b-3">
   <BColFormLabel
    for="staticEmail"
    class="col-sm-2"
   >
    Email
   </BColFormLabel>
   <Col col="sm-10">
    <BFormInput
     type="text"
     :state-src="user"
     state-path="email"
    />
   </Col>
  </Row>
  <Row margin="b-3">
   <BColFormLabel
    for="inputPassword"
    class="col-sm-2"
   >
    first_name
   </BColFormLabel>
   <Col col="sm-10">
    <BInputGroup margin="b-3">
     <BFormInput
      type="text"
      :state-src="user"
      state-path="first_name"
     />
     <BInputGroupText style="width:3em;">
      <Spinner
       v-show="user.syncStatus == 100"
       spinner="grow"
       sm
      />
     </BInputGroupText>
    </BInputGroup>
   </Col>
  </Row>
  <JsonView
   v-if="user.validationResult && !user.validationResult.valid"
   :data="user.validationResult"
  />
  <JsonView
   v-else
   :data="user.syncResult"
  />
 </ViewState>
</template>
```

```ts
export default defineNuxtConfig({
 usebootstrap: {
  integration: {
   protocol: {
    'reqres-sync': {
     type: 'fetch',
     prefix: 'https://reqres.in/api/',
     headers: {
      'x-api-key': 'reqres-free-v1',
     },
     sync: {
      method: 'put',
      delay: 1000,
      maxWait: 3000,
     },
    },
   },
  },
 },
});
```

--------------------------------

### Vue: Default Offcanvas Example

Source: https://usebootstrap.org/lang-en/components/offcanvas

Demonstrates a basic Offcanvas component displayed by default in Vue.js. It includes a header with a close button and a body for content. This setup is useful for initial display or persistent side panels.

```vue
<template>
 <Offcanvas
  placement="start"
  show
  :backdrop="false"
 >
  <OffcanvasHeader>
   <OffcanvasTitle>Offcanvas</OffcanvasTitle>
   <CloseButton dismiss="offcanvas" />
  </OffcanvasHeader>
  <OffcanvasBody>
   Content for the offcanvas goes here. You can place just about any
   Bootstrap component or custom elements here.
  </OffcanvasBody>
 </Offcanvas>
</template>

```

--------------------------------

### PageMeta Component for SEO

Source: https://usebootstrap.org/lang-en/getting-started/site-management

Demonstrates the usage of the PageMeta component to dynamically set title and description meta tags for pages. It supports integration with dynamic routes and includes an image attribute for social sharing.

```vue
<template>
 <Head>
  <PageMeta
   title="use-bootstrap"
   description="use-bootstrap is the front-end framework based on Nuxt3 and Bootstrap5."
   image="/img/logo/main1.svg"
  />
 </Head>
 <NuxtLayout>
  Page Contents
 </NuxtLayout>
</template>
```

--------------------------------

### Vue: Observe Element Resize with v-resize-observer

Source: https://usebootstrap.org/lang-en/extend/modules/vueuse

Shows how to use the `v-resize-observer` directive to get notified when an element's size changes. The example captures the content rectangle's width and height.

```vue
<script setup lang="ts">
const text = ref('');

function onResizeObserver(entries) {
 const [entry] = entries;
 const { width, height } = entry.contentRect;
 text.value = `width: ${width}, height: ${height}`;
}
</script>

<template>
 <textarea v-resize-observer="onResizeObserver">
  {{ text }}
 </textarea>
</template>
```

--------------------------------

### UseFullscreen Example

Source: https://usebootstrap.org/lang-en/extend/modules/vueuse

Demonstrates the UseFullscreen composable for enabling fullscreen mode on an element, typically a video player. It includes a button to toggle fullscreen and displays a video.

```vue
<template>
 <UseFullscreen v-slot="{ toggle }">
  <video
   src="/pexels/movie/3209211-uhd_3840_2160_25fps.mp4"
   class="image-fluid w-100"
   controls
  />
  <b-button
   color="primary"
   @click="toggle"
  >
   Go Fullscreen
  </b-button>
 </UseFullscreen>
</template>

```

--------------------------------

### Vue: Track Element Size with v-element-size

Source: https://usebootstrap.org/lang-en/extend/modules/vueuse

Shows how to use the `v-element-size` directive to monitor an element's dimensions. The example includes a basic setup and an advanced usage with options to specify the box-sizing model.

```vue
<script setup lang="ts">
const width1 = ref(0);
const height1 = ref(0);
function onResize({ width, height }: { width: number; height: number }) {
 width1.value = width;
 height1.value = height;
}
</script>

<template>
 <textarea v-element-size="onResize" />
 <!-- with options -->
 <textarea v-element-size="[onResize, { width: 100, height: 100 }, { box: 'content-box' }]" />
 <div>{{ width1 }}  {{ height1 }}</div>
</template>
```

--------------------------------

### Bootstrap Utility Classes Reference

Source: https://usebootstrap.org/lang-en/getting-started/props

This section lists various Bootstrap utility classes and their associated documentation links. Each entry points to specific documentation for properties like alignment, background, borders, display, flexbox, typography, and spacing utilities.

```APIDOC
BootstrapUtilityClasses:
  Description: A collection of CSS utility classes provided by Bootstrap for rapid styling and layout.
  Categories:
    - Alignment (align-content, align-items, align-self)
    - Background (background-color, background-gradient, background-opacity)
    - Borders (border, border-color, border-subtractive, border-width)
    - Display (display, display-headings)
    - Flexbox (flex, flex-direction, flex-fill, flex-grow, flex-order, flex-shrink, flex-wrap, justify-content)
    - Spacing (gap)
    - Typography (font-family, font-monospace, font-size, font-style, font-weight, headings, initialism, lead, line-height)
    - Position (bottom, end, fixed)
    - Float (float)
    - Clearfix (clearfix)
    - Columns (col)
    - Links (link-offset, link-opacity, link-underline, link-underline-opacity)
    - Visibility (invisible)
    - Stacks (hstack)
    - Focus Ring (focus-ring)
  Usage:
    Apply these classes directly to HTML elements to leverage Bootstrap's pre-defined styling.
    Example:
      <div class="d-flex justify-content-center">...</div>
      <p class="text-primary">This text is primary.</p>
  Related Documentation:
    - Flex Utilities: /lang-en/utilities/flex
    - Background Utilities: /lang-en/utilities/background
    - Borders Utilities: /lang-en/utilities/borders
    - Typography Utilities: /lang-en/content/typography
    - Spacing Utilities: /lang-en/utilities/spacing
```

--------------------------------

### Dropdown with Auto-Activated Links

Source: https://usebootstrap.org/lang-en/getting-started/migration

Shows a Bootstrap Dropdown component example where the `to` prop on `DropdownItem` is used to create navigation links. This demonstrates how to structure menu items for routing within a Vue application.

```vue
<template>
 <Dropdown>
  <DropdownToggle color="secondary">
   Dropdown button
  </DropdownToggle>
  <DropdownMenu>
   <DropdownItem to="/lang-en/components/dropdowns">
    lang-en
   </DropdownItem>
   <DropdownItem to="/lang-ja/components/dropdowns">
    lang-ja
   </DropdownItem>
   <DropdownItem to="/lang-en/getting-started/migration">
    lang-en migration
   </DropdownItem>
   <DropdownItem to="/lang-ja/getting-started/migration">
    lang-ja migration
   </DropdownItem>
  </DropdownMenu>
 </Dropdown>
</template>

```

--------------------------------

### UseNow Example

Source: https://usebootstrap.org/lang-en/extend/modules/vueuse

Demonstrates the UseNow composable, which provides the current date and time and allows pausing and resuming the timer. It displays the current time and includes buttons to control the timer.

```vue
<template>
  <ClientOnly>
  <UseNow v-slot="{ now, pause, resume }">
   {{ now }}
   <b-button
    color="primary"
    @click="pause()"
   >
    Pause
   </b-button>
   <b-button
    color="primary"
    @click="resume()"
   >
    Resume
   </b-button>
  </UseNow>
 </ClientOnly>

</template>

```

--------------------------------

### Nuxt.js Additional Sass File Import

Source: https://usebootstrap.org/lang-en/getting-started/customize

Include additional Sass files alongside the main usebootstrap styles. This example adds a custom SCSS file named 'doc.scss' from the assets directory.

```typescript
export default defineNuxtConfig({
 modules: ['usebootstrap'],
 css: [
  'usebootstrap/scss/usebootstrap',
  './assets/scss/doc.scss',
 ],
 vite: {
  css: {
   preprocessorOptions: {
    scss: {
     additionalData: `
          @import "@/assets/scss/_variables.scss";
          `,
    },
   },
  }
 },
});
```

--------------------------------

### Vue: Styling Sample Output

Source: https://usebootstrap.org/lang-en/content/reboot

Shows the usage of the `<samp>` tag for indicating sample output from a computer program within Vue.js templates, as styled by Bootstrap.

```vue
<template>
 <samp>
  This text is meant to be treated as sample output from a computer program.
 </samp>
</template>
```

--------------------------------

### Responsive Custom Aspect Ratio

Source: https://usebootstrap.org/lang-en/helpers/ratio

CSS variables for aspect ratios can be modified across breakpoints to create responsive designs. This example shows an element that starts with a 4x3 ratio and changes to a custom 2x1 ratio at the medium breakpoint.

```vue
<template>
 <b-div ratio="4x3">
  <b-div>4x3, then 2x1</b-div>
 </b-div>
</template>
```

--------------------------------

### use-bootstrap Props Overview

Source: https://usebootstrap.org/lang-en/getting-started/props

This section details the general concept of props within the use-bootstrap library. Props are essential for passing data and configuration down to components, enabling dynamic behavior and customization.

```APIDOC
use-bootstrap Props:

  Description:
    Props are custom properties that you can pass to components to control their behavior and appearance.
    They allow for data to flow from parent components to child components.

  Usage:
    Props are passed to components like HTML attributes.
    Example:
      <MyComponent propName="value" anotherProp={123} />

  Key Concepts:
    - Data Flow: Props facilitate unidirectional data flow.
    - Immutability: Props should generally be treated as immutable within the child component.
    - Type Checking: While not explicitly detailed here, it's good practice to define prop types for better maintainability.

  Related:
    - Components: All components in use-bootstrap accept props.
    - Methods: Component methods might interact with or modify state derived from props.
```

--------------------------------

### FormText Block-Level Example (Vue)

Source: https://usebootstrap.org/lang-en/forms/overview

Demonstrates using `BFormControl`, `BFormLabel`, `BFormInput`, and `BFormText` to create a block-level form text element with specific validation rules. This setup ensures proper spacing and accessibility for form input help text.

```vue
<template>
 <BFormControl>
  <BFormLabel>Password</BFormLabel>
  <BFormInput
   type="password"
   aria-describedby="passwordHelpBlock"
  />
  <BFormText>
   Your password must be 8-20 characters long, contain letters and numbers,
   and must not contain spaces, special characters, or emoji.
  </BFormText>
 </BFormControl>
</template>
```

--------------------------------

### Use BIcon Component for Icons

Source: https://usebootstrap.org/lang-en/extend/modules/icons

Demonstrates the basic usage of the BIcon component to display icons from icon libraries. It shows how to specify the icon name and apply margins for spacing.

```vue
<template>
 <BIcon
  icon="bi:bootstrap"
  margin="2"
 />
 <BIcon
  icon="bi:alarm"
  margin="2"
 />
 <BIcon
  icon="bi:toggles"
  margin="2"
 />
 <BIcon
  icon="bi:shop"
  margin="2"
 />
</template>
```

--------------------------------

### Sass Theme Color Customization

Source: https://usebootstrap.org/lang-en/getting-started/customize

Customize theme colors by defining Sass variables in a SCSS file. This example sets the primary color. Ensure the file is placed in the assets folder and imported into Nuxt's configuration.

```scss
$primary: #00bb8e;
```

--------------------------------

### Vue Swiper Equal Height Example

Source: https://usebootstrap.org/lang-en/extend/components/swiper

Demonstrates using the Swiper component in Vue.js to create slides with equal height. This setup includes navigation controls and displays blockquotes within card components, ensuring consistent slide dimensions.

```vue
<template>
 <Swiper navigation>
  <SwiperSlide>
   <Card background-color="primary-subtle">
    <CardBody>
     <BBlockquote>“ This platform offers an incredible array of features and a sleek design. ”</BBlockquote>
    </CardBody>
   </Card>
  </SwiperSlide>
  <SwiperSlide>
   <Card background-color="primary-subtle">
    <CardBody>
     <BBlockquote>“ I intend to integrate this solution into multiple projects, it's that good. ”</BBlockquote>
    </CardBody>
   </Card>
  </SwiperSlide>
  <SwiperSlide>
   <Card background-color="primary-subtle">
    <CardBody>
     <BBlockquote>“ Exceptional design paired with comprehensive documentation and stellar support. ”</BBlockquote>
    </CardBody>
   </Card>
  </SwiperSlide>
  <SwiperSlide>
   <Card background-color="primary-subtle">
    <CardBody>
     <BBlockquote>“ The variety of landing page options is a significant advantage. ”</BBlockquote>
    </CardBody>
   </Card>
  </SwiperSlide>
  <SwiperSlide>
   <Card background-color="primary-subtle">
    <CardBody>
     <BBlockquote>“ The user interface is intuitive and the features are robust. ”</BBlockquote>
    </CardBody>
   </Card>
  </SwiperSlide>
  <SwiperSlide>
   <Card background-color="primary-subtle">
    <CardBody>
     <BBlockquote>“ A versatile tool that adapts to various project requirements seamlessly. ”</BBlockquote>
    </CardBody>
   </Card>
  </SwiperSlide>
 </Swiper>
</template>

```

--------------------------------

### IconBox Component: Demonstrating Circle Variants

Source: https://usebootstrap.org/lang-en/extend/components/icon-box

This example illustrates how to render the IconBox component with a circular background using the `circle` prop. It shows the component with different size props to demonstrate the visual effect of the circle.

```vue
<template>
 <IconBox
  icon="bi:house"
  color="primary"
  circle
  size="lg"
 />
 <IconBox
  icon="bi:house"
  color="primary"
  circle
 />
 <IconBox
  icon="bi:house"
  color="primary"
  circle
  size="sm"
 />
</template>

```

--------------------------------

### Vue Swiper Pagination Fraction Example

Source: https://usebootstrap.org/lang-en/extend/components/swiper

Demonstrates how to configure the Swiper component in Vue.js to use fraction pagination. This setup displays the current slide number and total slides, with clickable pagination elements. It requires the Swiper library and Vue.js.

```vue
<template>
 <Swiper
  :pagination="{ type: 'fraction', clickable: true }"
  navigation
 >
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=One"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Two"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Three"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Four"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Five"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Six"
    alt="Image Description"
   />
  </SwiperSlide>
 </Swiper>
</template>

```

--------------------------------

### Calendar Basic Usage Example

Source: https://usebootstrap.org/lang-en/extend/components/calendar

Demonstrates the basic usage of the Calendar component in a Vue.js application. It shows how to render the calendar with expanded view and custom attributes, specifying a color theme.

```vue
<template>
 <Calendar
  expanded
  :attributes="attributes"
  color="blue"
 />
</template>

<script setup lang="ts">
const attributes = ref([
 {
  key: 'today',
  highlight: true,
  dates: new Date(),
 },
]);
</script>
```

--------------------------------

### Bootstrap Vue align-content: between Example

Source: https://usebootstrap.org/lang-en/utilities/flex

Demonstrates using the `align-content` attribute with the `between` value in Bootstrap Vue. This distributes flex items evenly on the cross axis, with the first item at the start and the last item at the end. It requires `flex-wrap="wrap"` to show the effect.

```vue
<template>
 <b-div
  flex
  align-content="between"
  flex-wrap="wrap"
  margin="b-3"
  style="height: 200px"
 >
  <b-div padding="2">
   Flex item
  </b-div>
  <b-div padding="2">
   Flex item
  </b-div>
  <b-div padding="2">
   Flex item
  </b-div>
  <b-div padding="2">
   Flex item
  </b-div>
  <b-div padding="2">
   Flex item
  </b-div>
  <b-div padding="2">
   Flex item
  </b-div>
  <b-div padding="2">
   Flex item
  </b-div>
  <b-div padding="2">
   Flex item
  </b-div>
  <b-div padding="2">
   Flex item
  </b-div>
  <b-div padding="2">
   Flex item
  </b-div>
  <b-div padding="2">
   Flex item
  </b-div>
  <b-div padding="2">
   Flex item
  </b-div>
  <b-div padding="2">
   Flex item
  </b-div>
  <b-div padding="2">
   Flex item
  </b-div>
  <b-div padding="2">
   Flex item
  </b-div>
 </b-div>
</template>

```

--------------------------------

### Frequently Used Terminal Commands

Source: https://usebootstrap.org/lang-en/index

Common terminal commands for managing Nuxt.js development and dependencies, including starting the server, updating packages, and upgrading Nuxt.

```bash
npm run dev
```

```bash
npm install usebootstrap
```

```bash
npx nuxi upgrade
```

```bash
ctrl + c
```

--------------------------------

### Vue: Responsive Navbar Example

Source: https://usebootstrap.org/lang-en/components/navbar

Demonstrates a responsive, light-themed Bootstrap Navbar that collapses at the 'lg' breakpoint. It includes navigation links, a dropdown, and a search form, showcasing the integration of various sub-components.

```vue
<template>
 <Navbar
  expand="lg"
  background-color="body-tertiary"
 >
  <Container type="fluid">
   <NavbarBrand>Navbar</NavbarBrand>
   <NavbarToggler />
   <NavbarCollapse>
    <NavbarNavList margin="e-auto b-2 b-lg-0">
     <NavItem>
      <NavLink active>
       Home
      </NavLink>
     </NavItem>
     <NavItem>
      <NavLink to="/lang-en/components/navbar/">
       Link
      </NavLink>
     </NavItem>
     <NavItemDropdown>
      <NavItemDropdownToggle>Dropdown</NavItemDropdownToggle>
      <DropdownMenu>
       <DropdownItem>Action</DropdownItem>
       <DropdownItem to="/lang-en/components/navbar/">
        Another action
       </DropdownItem>
       <DropdownItemDivider />
       <DropdownItem>Something else here</DropdownItem>
      </DropdownMenu>
     </NavItemDropdown>
     <NavItem>
      <NavLink disabled>
       Disabled
      </NavLink>
     </NavItem>
    </NavbarNavList>
    <BForm
     flex
     role="search"
    >
     <BFormInput
      margin="e-2"
      type="search"
      placeholder="Search"
     />
     <b-button
      color="outline-success"
      type="submit"
     >
      Search
     </b-button>
    </BForm>
   </NavbarCollapse>
  </Container>
 </Navbar>
</template>

```

--------------------------------

### Bootstrap Vue Align Items Examples

Source: https://usebootstrap.org/lang-en/utilities/flex

Demonstrates the usage of Bootstrap's `align-items` utility in Vue.js components to align flex items on the cross axis. It showcases different alignment options like `start`, `end`, `center`, `baseline`, and `stretch`, along with their responsive variations.

```vue
<template>
 <b-div
  flex
  align-items="start"
  margin="b-3"
  style="height: 100px"
 >
  <b-div padding="2">
   Flex item
  </b-div>
  <b-div padding="2">
   Flex item
  </b-div>
  <b-div padding="2">
   Flex item
  </b-div>
 </b-div>
 <b-div
  flex
  align-items="end"
  margin="b-3"
  style="height: 100px"
 >
  <b-div padding="2">
   Flex item
  </b-div>
  <b-div padding="2">
   Flex item
  </b-div>
  <b-div padding="2">
   Flex item
  </b-div>
 </b-div>
 <b-div
  flex
  align-items="center"
  margin="b-3"
  style="height: 100px"
 >
  <b-div padding="2">
   Flex item
  </b-div>
  <b-div padding="2">
   Flex item
  </b-div>
  <b-div padding="2">
   Flex item
  </b-div>
 </b-div>
 <b-div
  flex
  align-items="baseline"
  margin="b-3"
  style="height: 100px"
 >
  <b-div padding="2">
   Flex item
  </b-div>
  <b-div padding="2">
   Flex item
  </b-div>
  <b-div padding="2">
   Flex item
  </b-div>
 </b-div>
 <b-div
  flex
  align-items="stretch"
  margin="b-3"
  style="height: 100px"
 >
  <b-div padding="2">
   Flex item
  </b-div>
  <b-div padding="2">
   Flex item
  </b-div>
  <b-div padding="2">
   Flex item
  </b-div>
 </b-div>
</template>

```

```html
<div class="d-flex align-items-start mb-3" style="height: 100px;">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>
<div class="d-flex align-items-end mb-3" style="height: 100px;">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>
<div class="d-flex align-items-center mb-3" style="height: 100px;">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>
<div class="d-flex align-items-baseline mb-3" style="height: 100px;">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>
<div class="d-flex align-items-stretch mb-3" style="height: 100px;">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

```

--------------------------------

### UseNetwork Example

Source: https://usebootstrap.org/lang-en/extend/modules/vueuse

Shows how to use the UseNetwork composable to monitor the browser's network status, including online status and connection type. The status is displayed using a JsonView component.

```vue
<template>
 <ClientOnly>
  <UseNetwork v-slot="networkStatus">
   <JsonView :data="networkStatus" />
  </UseNetwork>
 </ClientOnly>
</template>

```
Tokens:
Raw