@devcoffee/builtin-components v1.0.0

Vue 3 Component Library

This project is a Vue 3 component library built using Vite, PrimeVue 4, and Tailwind CSS 4. It is designed to provide reusable UI components.

📦 Features

• Vue 3 with Composition API
• PrimeVue 4 for UI components
• Tailwind CSS 4 for styling
• TypeScript for type safety
• Vite for fast development and optimized builds

🚀 Getting Started

Installation

pnpm install

Development

To start the development server, run:

pnpm dev

Build

To build the project for production, run:

pnpm build

Linting & Formatting

pnpm lint
pnpm format

📂 Project Structure

├── src/
│   ├── components/    # Reusable Vue components
│   ├── forms/         # Form-related components
│   ├── styles/        # TailwindCSS styles
│   ├── plugins/       # Plugin registration (e.g., PrimeVue)
│   ├── main.ts        # Application entry point
│   ├── App.vue        # Root component
│
├── public/            # Static assets
├── vite.config.ts     # Vite configuration
├── tsconfig.json      # TypeScript configuration
├── README.md          # Project documentation

🛠 Usage

Importing Components

You can import components directly in your Vue files:

<script setup>
import MyComponent from '@/components/MyComponent.vue'
</script>

<template>
  <MyComponent />
</template>

Registering Plugins

PrimeVue components are registered via a plugin:

import { createApp } from 'vue'
import PrimeVue from 'primevue/config'
import App from './App.vue'
import Button from 'primevue/button'

const app = createApp(App)

app.use(PrimeVue)
app.component('Button', Button)

app.mount('#app')

🎨 Styling with Tailwind CSS

Tailwind CSS is used for styling. You can apply utility classes directly in your templates:

<template>
  <div class="p-4 bg-blue-500 text-white">Hello, Tailwind!</div>
</template>

📜 License

This project is licensed under the MIT License.