BojuVue

Appearance

Live Examples ​

BVButton ​

Generic (Vue) ​

vue
<script setup>
import { BVButton } from 'bojuvue'
</script>

<template>
  <div style="display: flex; flex-wrap: wrap; gap: 12px; align-items: center;">
    <BVButton text="Get started" href="https://example.com/get-started" theme="brand" size="big" />
    <BVButton text="Learn more" href="https://example.com" theme="alt" />
    <BVButton text="No href (button)" />
  </div>
</template>
Get startedLearn more

VitePress ​

vue
<script setup>
import { BVButton } from 'bojuvue/vitepress'
</script>

<template>
  <div style="display: flex; flex-wrap: wrap; gap: 12px; align-items: center;">
    <BVButton text="Get started" href="https://example.com/get-started" theme="brand" size="big" />
    <BVButton text="Learn more" href="https://example.com" theme="alt" />
    <BVButton text="No href (button)" />
  </div>
</template>
Get startedLearn more

BVIconButton ​

Generic (Vue) ​

vue
<script setup>
import { BVIconButton } from 'bojuvue'

const SETTINGS_ICON =
  '<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>'
</script>

<template>
  <div style="display: flex; flex-wrap: wrap; gap: 12px; align-items: center;">
    <BVIconButton text="Settings" :icon="SETTINGS_ICON" href="https://example.com/settings" />
    <BVIconButton :icon="SETTINGS_ICON" label="Settings" href="https://example.com/settings" />
    <BVIconButton text="Submit" />
  </div>
</template>
Settings

VitePress ​

vue
<script setup>
import { BVIconButton } from 'bojuvue/vitepress'

const SETTINGS_ICON =
  '<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>'
</script>

<template>
  <div style="display: flex; flex-wrap: wrap; gap: 12px; align-items: center;">
    <BVIconButton text="Settings" :icon="SETTINGS_ICON" href="https://example.com/settings" />
    <BVIconButton :icon="SETTINGS_ICON" label="Settings" href="https://example.com/settings" />
    <BVIconButton text="Submit" />
  </div>
</template>
Settings

BVMoreButton ​

Generic (Vue) ​

vue
<script setup>
import { BVMoreButton } from 'bojuvue'

const GITHUB_ICON =
  '<svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor" aria-hidden="true"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.84 1.238 1.84 1.238 1.07 1.834 2.807 1.304 3.492.997.108-.775.418-1.305.762-1.605-2.665-.3-5.467-1.332-5.467-5.93 0-1.31.468-2.381 1.235-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.3 1.23a11.5 11.5 0 0 1 3.003-.404c1.02.005 2.047.138 3.006.404 2.29-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.233 1.911 1.233 3.221 0 4.61-2.807 5.625-5.479 5.921.43.372.823 1.102.823 2.222 0 1.604-.015 2.896-.015 3.293 0 .32.216.694.824.576C20.565 23.092 24 18.596 24 13.297c0-6.627-5.373-12-12-12z"/></svg>'
const BUG_ICON =
  '<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 5 7 3M15 5l2-2"/><circle cx="12" cy="6" r="2"/><rect x="7" y="8" width="10" height="11" rx="5"/><path d="M7 11H3M21 11h-4M7 14H3M21 14h-4M7 17l-3 3M17 17l3 3"/></svg>'
</script>

<template>
  <BVMoreButton
    :items="[
      { label: 'GitHub repo', href: 'https://github.com/ScottKirvan/BojuVue', icon: GITHUB_ICON },
      { label: 'Report a bug', href: 'https://github.com/ScottKirvan/BojuVue/issues/new?template=bug_report.md', icon: BUG_ICON },
    ]"
  />
</template>

VitePress ​

vue
<script setup>
import { BVMoreButton } from 'bojuvue/vitepress'

const GITHUB_ICON =
  '<svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor" aria-hidden="true"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.84 1.238 1.84 1.238 1.07 1.834 2.807 1.304 3.492.997.108-.775.418-1.305.762-1.605-2.665-.3-5.467-1.332-5.467-5.93 0-1.31.468-2.381 1.235-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.3 1.23a11.5 11.5 0 0 1 3.003-.404c1.02.005 2.047.138 3.006.404 2.29-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.233 1.911 1.233 3.221 0 4.61-2.807 5.625-5.479 5.921.43.372.823 1.102.823 2.222 0 1.604-.015 2.896-.015 3.293 0 .32.216.694.824.576C20.565 23.092 24 18.596 24 13.297c0-6.627-5.373-12-12-12z"/></svg>'
const BUG_ICON =
  '<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 5 7 3M15 5l2-2"/><circle cx="12" cy="6" r="2"/><rect x="7" y="8" width="10" height="11" rx="5"/><path d="M7 11H3M21 11h-4M7 14H3M21 14h-4M7 17l-3 3M17 17l3 3"/></svg>'
</script>

<template>
  <BVMoreButton
    :items="[
      { label: 'GitHub repo', href: 'https://github.com/ScottKirvan/BojuVue', icon: GITHUB_ICON },
      { label: 'Report a bug', href: 'https://github.com/ScottKirvan/BojuVue/issues/new?template=bug_report.md', icon: BUG_ICON },
    ]"
  />
</template>

BVPlatformButton ​

Generic (Vue) ​

vue
<script setup>
import { BVPlatformButton } from 'bojuvue'

const siteBase = import.meta.env.BASE_URL
</script>

<template>
  <BVPlatformButton
    :base="siteBase"
    manifest-url="platformButton.json"
    fallback-href="https://github.com/ScottKirvan/BojuVue/releases"
  />
</template>
View Downloads

VitePress ​

vue
<script setup>
import { BVPlatformButton } from 'bojuvue/vitepress'
</script>

<template>
  <BVPlatformButton
    manifest-url="platformButton.json"
    fallback-href="https://github.com/ScottKirvan/BojuVue/releases"
  />
</template>
View Downloads

Released under the MIT License.

Copyright © Scott Kirvan