Skip to content

alexy-os/bunjs-vue-shadcn

Repository files navigation

Bunjs + Vite + Shadcn-vue Starter Template

A minimalist starter template for small Vue.js projects using Bun as the JavaScript runtime and package manager.

⚠️ Important: This template is recommended for small projects that don't require SEO. For large-scale applications, consider using Nuxt.js instead.

Stack

  • 🚀 Bun - Fast all-in-one JavaScript runtime & package manager
  • ⚡️ Vite - Next Generation Frontend Tooling
  • 🎨 Shadcn-vue - Re-usable components built with Radix UI and Tailwind CSS
  • 🎯 Vue 3 - The Progressive JavaScript Framework
  • 💎 TypeScript - JavaScript with syntax for types
  • 🎨 Tailwind CSS - A utility-first CSS framework

Getting Started

# Clone the repository
git clone <repository-url>

# Navigate to project directory
cd <project-name>

# Install dependencies
bun install

Project Setup

  1. Initialize shadcn-vue:
npx shadcn-vue@latest init
  1. Follow the initialization prompts for components.json:
  • TypeScript: Yes
  • Framework: Vite
  • Style: Default
  • Base color: Your preference
  • Global CSS file: src/assets/index.css
  • CSS variables: Yes
  • Tailwind config: tailwind.config.js
  • Import alias components: @/components
  • Import alias utils: @/lib/utils

Development Scripts

# Start development server
bun run dev

# Build for production
bun run build

# Preview production build
bun run preview

Using Components

Install shadcn-vue components:

npx shadcn-vue@latest add button

Usage example:

<script setup lang="ts">
import { Button } from '@/components/ui/button'
</script>

<template>
  <Button>Click me</Button>
</template>

Project Structure

├── src/
│   ├── assets/
│   │   └── index.css
│   ├── components/
│   │   └── ui/
│   ├── lib/
│   │   └── utils.ts
│   ├── App.vue
│   └── main.ts
├── components.json
├── tailwind.config.js
├── tsconfig.json
└── vite.config.ts

Features

  • ⚡️ Lightning-fast development with Bun and Vite
  • 🎨 Beautiful UI components from shadcn-vue
  • 💪 Type-safe development with TypeScript
  • 🎯 Modern Vue 3 Composition API
  • 📦 Efficient package management with Bun
  • 🎨 Utility-first styling with Tailwind CSS

Performance Considerations

This template is optimized for:

  • Single Page Applications (SPA)
  • Client-side rendered applications
  • Small to medium-sized projects
  • Rapid prototyping and development

License

MIT


🔍 Note: For projects requiring SEO, server-side rendering, or more complex architecture, we recommend using Nuxt.js.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.