The vue fullstack starter
for saas, blog, admin, docs

Integrated Auth, Payments, Database, Mails, File Upload and More.
Scalable and production-ready
Simple, Fast & Smart

Authentication.

Full authentication flow, including password, social login, magic link and more.

Email/Password
15+ Social Logins
Link Multiple OAuth
Permissions & roles
Verification Email
Reset Password
Forgot Password
Fully customize
const { email, password } = await readBody(event)
const user = await handleUserValidation(email, password)

await db.user.update({
  where: {
    id: user.id,
  },
  data: {
    lastLoginAt: new Date(),
  },
})

Database.

Supports all popular databases like SQLite, Postgres, MySQL, MongoDB with Prisma ORM.

CRUD
Supabase / Aws Cloud
Readable data models
Database migrations
Real-time subscriptions
Permissions & roles
Type-safety client
const { user } = await requireUserSession(event)

const taskId = getRouterParam(event, 'id')
const schema = z.object({
  title: z.string().min(1).max(240).optional(),
  content: z.string().optional(),
})

const { title, content } = await readValidatedBody(event, body =>
  schema.parse(body),
)

const task = await db.task.update({
  where: {
    id: taskId,
    userId: user.id,
  },
  data: {
    title,
    content,
  },
})

Billing and Payments.

Complete billing solution with Stripe, Lemon Squeezy and Paddle.

Subscriptions
Global tax compliance
One-Time Payment
Plans managment
Pricing table
Billing Portal
Update Payment Methods
Cancel Subscriptions
Update Plans
import type {
  SubscriptionCreatedEvent, TransactionCompletedEvent } from '@paddle/paddle-node-sdk'
import {
  CustomerCreatedEvent,
  EventName,
  SubscriptionUpdatedEvent,
} from '@paddle/paddle-node-sdk'

export default defineEventHandler(async (event) => {
  try {
    const paddleInstance = getPaddleInstance()

Mails.

Integrate with mail providers like Plunk, Resend, Postmark, Nodemailer, and use our pre-built email templates to easily send emails to your customers.

Vue email templates
Integration with auth
Email marketing
Multiple mail provider
Unified email api
const html = confimAccountTemplate()

await sendEmail({
  to: email,
  from: runtimeConfig.fromEmail,
  subject: 'Confirm Your Account',
  html,
})

setResponseStatus(event, 201)

Storage & File Upload.

Supports S3-compatible storage with providers such as AWS, Azure, Google, and Cloudflare, as well as local file storage.

Upload Files from Server
Client Directly Upload
One-Time URLs
File Management
Delete Files
Permissions
File size limit
import { upload } from '@@/server/libs/storage'

export default defineEventHandler(async (event) => {
  const form = await readFormData(event)
  validateBlob(file, { maxSize: '1MB', types: ['image/png', 'image/jpeg', 'image/webp'] })

  await upload({ name: "upload/images/filename.png", data: file })

SEO & Marketing.

Improve your app's SEO and enhance your product marketing with our powerful head config, composables, and components.

Out of the box
SEO Optimization
Meta tags definition
Sensible defaults
useHead
useSeoMeta
<script setup lang='ts'>
  useSeoMeta({
    title: computed(() => route.meta.title ? `${appConfig.appName} - ${route.meta.title}` : `${appConfig.appName}`).value as string,
    description: computed(() => route.meta.description ? route.meta.description : `${appConfig.appDescription}`).value as string,
    ogTitle: computed(() => route.meta.title ? `${appConfig.appName} - ${route.meta.title}` : `${appConfig.appName}`).value as string,
    ogDescription: computed(() => route.meta.description ? route.meta.description : `${appConfig.appDescription}`).value as string,
  })

Analytics.

Keep track and analyze your users' behavior with support for Google Analytics, Posthog, Mixpanel, Plausible, Umami, Vercel, or your own custom analytics solution.

Out of the box
Product analytics
Web analytics
Event timeline
Console logs
export const useAnalytics = () => {
  const googleAnalyticsId = globalThis._importMeta_.env.VITE_GOOGLE_ANALYTICS_ID

  useHead({
    script: [
      {
        key: 'analytics-google',
        async: true,

Admin.

Manage your users, transactions, and all other product data easily with our powerful admin panel.

Data list
Tanstack/table
CRUD Components
User Management
User roles
Lock/Unlock users
Filter & Search
Pagination
export default defineEventHandler(async (event) => {
  const query = getQuery(event)
  const page = Number(query.page || 1)
  const pageSize = Number(query.pageSize || 10)
  const search = String(query.search || '')
  const filter = String(query.filter || 'all')
  const orderBy = JSON.parse(String(query.orderBy || '{"createdAt":"desc"}'))

  const [tasks, total] = await db.$transaction([
    db.task.findMany({
      where,
      skip: (page - 1) * pageSize || 0,
      take: pageSize || 20,
      orderBy,
    }),
    db.task.count({
      where,
    }),
  ])

  return { tasks, total }
})

First-class developer experience
Simple, clean, fully customizable

We are a team of engineers who love building starter kits for other engineers.
We've done the hard work for you, so you can focus on what matters.

Nuxt

The premier choice for building production-grade full-stack web applications with Vue.js, support CSR, SSR, SSG, Hybrid Rendering, and Edge-Side Rendering.

Tailwindcss

Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML.

Shadcn / Radix

Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.

Iconify

All popular icon sets, one framework. Over 150+ icon sets and 200,000 open source vector icons.

Nuxt/Font

Optimized Custom Web Fonts for your apps. built-in provider, zero-configuration required and local download support.

Prisma

Next-generation ORM for Node.js & TypeScript | PostgreSQL, MySQL, MariaDB, SQL Server, SQLite, MongoDB and CockroachDB.

Supabase

Supabase is an open source Firebase alternative. Start your project with a Postgres database, instant APIs, Realtime subscriptions, Storage, and Vector embeddings.

Vee-validate/Zod

Validating with Zod. You can create validation schemas for either field-level validation or form-level validation.

Eslint

Auto fix for formatting (aimed to be used standalone without Prettier). Reasonable defaults, best practices, only one line of config.

Pinia

Intuitive, type safe, light and flexible Store for Vue using the composition api with DevTools support.

Vite

Vite is a new breed of frontend build tooling that significantly improves the frontend development experience.

Light / Dark Mode

Dark and Light mode with auto detection. Works with client-side and universal rendering.

15+ Color Theme

Use CSS Variables to customize the look and feel of your application. Pre-configured with over 15+ distinct color schemes.

Automatic routing

Nuxt routing generates the routes from the pages/ directory, based on their filename. And we support create components inside the pages folder!

Auto Imports

Nuxt auto-imports components, composables, helper functions and Vue APIs. and only includes what is used in your production code.

Lifetime update, Unlimited projects.

🎅 $100 off for the first 300 customers

Personal

$369$269

One-time payment
Lifetime updates

Access to 1 people

Unlimited projects

  • Lifetime access to 1 people
  • Unlimited projects
  • Lifetime updates
  • Over 15+ color themes
  • Email and Chat support
  • Marketing Pages
  • Blog Generator
  • Documentation Generator
  • Super Admin
  • Dashboard Demo
  • Profile Settings

Team

$899$799

One-time payment
Lifetime updates

Access to 25 people

Unlimited projects

  • Lifetime access to 1 people
  • Unlimited projects
  • Lifetime updates
  • Over 15+ color themes
  • Email and Chat support
  • Marketing Pages
  • Blog Generator
  • Documentation Generator
  • Super Admin
  • Dashboard Demo
  • Profile Settings

Frequently asked questions

Have another question? Contact us by support@ydesign.dev

Can't find the answer to your question? Contact to receive help from our team.

Production-Ready
Ship your startup today