📘 English | 📙 简体中文

Bottle-UI Component Library 🎉

Hi! This is a Vue 3 component library I built to practice component encapsulation, communication, TypeScript usage, and CSS skills.
It's also my final project for a Web development course. 🦝

Live Documentation (Vercel): https://bottle-ui-eta.vercel.app

Installation 🔧

npm i @bottle414/bottle-ui

  pnpm i @bottle414/bottle-ui

  yarn add @bottle414/bottle-ui

Usage 📏

Import styles

import '../node_modules/@bottle414/bottle-ui/dist/shared.css'

(Optional) Enable Volar type support

import '../node_modules/@bottle414/bottle-ui/dist/types/bottle-ui.es.d.ts'

Import components

You can import globally or just the ones you need.

Global Import 🌟

import { createApp } from 'vue'
import App from './App.vue'
import BottleUI from '@bottle414/bottle-ui'

const app = create(App)
app.use(BottleUI)
app.mount()

Partial Import 🍊

You can register components at the entry point:

import { createApp } from 'vue'
import App from './App.vue'
import { BButton, BIcon } from '@bottle414/bottle-ui'

const app = createApp(App)
app.use(BButton)
app.use(BIcon)
app.mount('#app')

Or import them directly inside a component:

<template>
    <BButton> Hello! <BButton/>
<template/>

<script>
    import { BButton } from '@bottle414/bottle-ui'
<script/>

And you're ready to go! 🎉🦝