Skip to content

ydesign-labs/shadcn-nuxt-starter

Repository files navigation

shadcn-nuxt-starter

🌐 Preview: https://shadcn-nuxt-starter.xdesign.tech

Shadcn Nuxt Starter

Starter built with Nuxt 3 + Shadcn-ui + UnoCSS + TypeScript.

⚡️ Easy to build fast, SEO-friendly and scalable web applications, including:

  • SaaS - Server-side Rendering (SSR)
  • Docs - Static Site Generation (SSG)
  • Dashboard - Client Side Rendering (CSR)

Variations (coming soon)

  • Shadcn-vue-starter - Vite Starter Template

🔥 Features

This is a starter template using the following stack:

  • ⛰️ Nuxt 3 - SSR, SSG, CSR, File-based routing, components auto importing, (compatibilityVersion: 4), etc.

  • 🎨 Shadcn-vue - Beautifully designed re-usable components built with Radix Vue.

  • ⚡️ Vite - Instant HMR.

  • 🌈 UnoCSS - The instant on-demand atomic CSS engine.

  • 😃 Iconify - Over 200,000 open source vector icons.

  • 🍍 Pinia - State Management.

  • 🤖 The <script setup> syntax.

  • 🦾 TypeScript, of course.

  • 💨 Zero-config cloud functions and deploy.

Built-in feature from Next.js:

  • 🔍 SEO Optimization and Meta tags definition.

  • 📝 Markdown Support

  • 🖥️ File based routing.

  • 📑 Layout system.

  • 📥 Auto importing - for Composition API, VueUse and custom composables.

  • 📲 PWA with offline support and auto-update behavior.

🚀 Getting started

Requirements

  • Node.js 18+ and pnpm

Development

  1. Clone the repository:
git clone https://github.com/xdesign-dev/shadcn-nuxt-starter.git project-name
cd project-name
  1. Install dependencies:
pnpm install
  1. Then, you can run locally in development mode with live reload:
pnpm dev

Build

To build the App, run

pnpm build

💎 Credits

All credits go to these open-source works and resources

  • Nuxt for creating this beautiful project.
  • Radix Vue for doing all the hard work to make sure components are accessible.
  • antfu for vitesse and vitesse-nuxt.
  • VueUse for providing many useful utilities.

License

Licensed under the MIT license.