Nuxt3 Shadcn Starter Template

Accelerate Your Nuxt 3 Development with a Feature-Rich Starter Template

This Nuxt 3 starter template provides a robust foundation for building modern web applications. It seamlessly integrates Tailwind CSS for utility-first styling, Pinia for efficient state management, and the popular Shadcn-vue for accessible UI components. Also included are VueUse utilities, Nuxt Image optimization, and Radix Icons, enabling a streamlined and productive development workflow from the outset. Launch your project quickly with these pre-configured tools and a well-organized structure.

Features:

• Dark Mode: Integrated support for easy switching between light and dark themes.
• Image Optimization (@nuxt/image): Leverages @nuxt/image for automatic image optimization, enhancing performance and loading speed.
• Tailwind CSS Integration (@nuxtjs/tailwindcss): Pre-configured with Tailwind CSS for utility-first styling and rapid UI development.
• State Management (Pinia): Utilizes Pinia (@pinia/nuxt) for intuitive, type-safe, and scalable global state management.
• VueUse Utilities (@vueuse/nuxt): Provides access to a rich collection of VueUse composables for common development tasks.
• Radix Icons (@radix-icons/vue): Includes a set of high-quality, accessible SVG icon components from Radix.
• Shadcn-vue Integration (shadcn-nuxt): Features Shadcn-vue components, renowned for their accessibility, customizability, and seamless Nuxt integration.
• Nuxt 3 Framework: Built upon the latest powerful and modern Nuxt 3 framework for Vue.js development.
• Class Variance Authority: Employs class-variance-authority for building type-safe component variants with ease.
• Clsx Utility: Includes clsx for a lightweight and efficient way to conditionally construct className strings.
• Radix Vue: Utilizes radix-vue for unstyled, accessible UI primitives, forming the base for Shadcn-vue.
• Tailwind Merge: Incorporates tailwind-merge to intelligently merge Tailwind CSS classes, preventing style conflicts.
• Tailwindcss Animate: Uses tailwindcss-animate plugin to easily add enter and exit animations with Tailwind CSS utilities.
• TypeScript Support: Developed with TypeScript for enhanced code quality, maintainability, and developer experience.

Summary:

This Nuxt 3 starter template serves as an excellent launchpad, bundling essential technologies for contemporary web development. It combines Nuxt 3's advanced capabilities with Tailwind CSS for flexible styling, Pinia for robust state management, and the elegant Shadcn-vue component library for UI. With pre-installed utilities like VueUse, Radix Icons, and image optimization, developers can significantly accelerate their project setup, allowing them to focus on building unique features rather than handling initial boilerplate configurations.