# Source: https://raw.githubusercontent.com/ServiceStack/docs.servicestack.net/refs/heads/main/MyApp/_pages/templates/vue.md

---
title: Vue Tailwind Templates
---

## .NET 10 Vue Identity Auth Tailwind Templates

<vibe-template
  template="vue-static"
  title="Vue Static"
  description="Minimal foundation for a classic Single Page Application (SPA) statically generated by Vite. Perfect for dashboards, internal tools, admin panels, and highly interactive apps where SEO isn't a priority."
  href="https://vue-static.web-templates.io"
  screenshot="/img/pages/templates/vue-static.webp"
  github-template="https://github.com/new?template_name=vue-static&template_owner=NetCoreTemplates"></vibe-template>

### Full-Featured Vue Template

A full-featured Vue SPA Template providing a good reference implementation for integrating several Vue features including Markdown powered Blog, Whats New and Video features, Todos, AutoQuery Bookings CRUD UI alongside .NET features like API Keys, AI Chat, OpenAPI & Swagger UI.

<vibe-template
  template="vue-spa"
  title="Vue SPA"
  description="A feature-rich Vue Single Page Application powered by Vite. Includes Blog functionality, Todos, @servicestack/vue components, API Keys management, AI Chat capabilities, and Swagger UI - all integrated with a robust .NET backend."
  href="https://vue-spa.web-templates.io"
  screenshot="/img/pages/templates/vue-spa.webp"></vibe-template>

## .NET Vue Templates with Static Exports

All Vue SPA Templates use **static exports** where at deployment a production build of the Node App is generated and published together with the .NET App in its `/wwwroot` folder, utilizing static file serving to render its UI:

![](/img/pages/templates/info/vite-prod.svg)

### Hybrid Development Approach

- ASP.NET Core proxies requests to Vite dev server (running on port 5173)
- Hot Module Replacement (HMR) support for instant UI updates
- WebSocket proxying for Vite HMR functionality

![](/img/pages/templates/info/vite-dev.svg)

### Seamless fusion of .NET APIs, Razor Pages and Vue UIs

A benefit of this architecture of the .NET App handling all Requests and only proxying unknown requests to the Node server is that it enables a seamless fusion of .NET Razor Pages and Vue UIs. As many customers have customized Identity Auth flows we've included the 
[Tailwind Identity Auth Razor Pages](https://github.com/NetCoreTemplates/vue-static/tree/main/MyApp/Areas/Identity/Pages) from the [razor](https://github.com/NetCoreTemplates/razor) template into all new .NET Vue Templates.

This ability to seamlessly integrate Vue components within Razor Pages enables a gradual migration strategy, allowing teams to incrementally modernize legacy ASP.NET websites by progressively replacing individual pages or sections with Vue UIs without requiring a complete rewrite or disrupting existing functionality.

## AI-First Development Future

AI can now generate complete, production-ready UI code enabling an entirely new development workflow where developers iteratively guide AI agents to implement features through natural language instructions, where features can be iteratively prototyped, refined and improved within seconds instead of hours.

This AI-first approach is rapidly maturing, with tools like [Cursor](https://cursor.com), [Claude Code](https://www.claude.com/product/claude-code), and [Codex](https://chatgpt.com/features/codex/) becoming the preferred platforms for this new paradigm with new tools designed to get maximum effectiveness of AI models with sophisticated planning tools, focused models optimized for code generation and edits and agentic workflows that's able to solidifying each new feature iteration with tests, along with detailed documentation, planning, migrations and usage guides.

## How ServiceStack Excels in AI-First Development

Context is king when developing with AI models. The better the context, the higher the quality of generated code and ServiceStack's architecture is uniquely suited for AI-assisted development:

### Declarative Typed APIs

All ServiceStack APIs follow a flat, declarative structure—The contract is explicit and consistent and LLMs don't need to guess what APIs accept or return.

### End-to-End Type Safety

Context quality directly impacts generated code quality. ServiceStack's TypeScript integration provides complete static analysis of what APIs accept, return, and how to bind responses—giving AI models the full context they need.
The static analysis feedback also directs models to identify and correct any errors in the generated code.

### Zero-Ambiguity Integration

AI models thrive on consistency. ServiceStack removes guesswork with a single pattern for all API calls:
- One generic `JsonServiceClient` for all APIs
- Consistent methods used to send all requests
- Consistent Typed Request DTO → Response DTO flow
- Uniform error handling

### TypeScript

Whilst TypeScript is often excluded in one-prompt solutions catering to non-developers, it's still a critical part of the AI development workflow. It provides a type system that helps AI models generate more accurate and maintainable code and TypeScript's static analysis also helps identify errors in the generated code which AI Models have have become really good at correcting—as such it's an integral part in all our SPA templates.

### Intuitive Project Structure

ServiceStack's [physical project structure](/physical-project-structure) provides clear separation of concerns, with the entire API surface area contained in [the ServiceModel project](/physical-project-structure#servicemodel-project)—making codebases easy for AI models to navigate and understand.

### Minimal Code Surface

Less code means fewer opportunities for errors. ServiceStack's high-productivity features minimize the code AI needs to generate:

- **[AutoQuery APIs](/autoquery/rdbms)** - Flexible, queryable APIs defined with just a Request DTO
- **[AutoQueryGrid Component](/vue/autoquerygrid)** - Complete CRUD UIs in 1 line of code
- **[Auto Form Components](/vue/autoform)** - Beautiful, validation-bound forms in 1 line of code

These components are ideal for rapidly building backend management interfaces, freeing developers to focus on differentiating customer-facing features.

---

<div class="not-prose mt-4 px-4 sm:px-6">
<div class="text-center"><h3 id="docker-containers" class="text-4xl sm:text-5xl md:text-6xl tracking-tight font-extrabold text-gray-900">
    Vue SPA Template
</h3></div>
<p class="mx-auto mt-5 max-w-3xl text-xl text-gray-500">
    Explore the high productivity features in the new ServiceStack Vue SPA template
</p>
<div class="py-8 max-w-7xl mx-auto px-4 sm:px-6">
    <lite-youtube class="w-full mx-4 my-4" width="560" height="315" videoid="JlUjWlVslRg" style="background-image: url('https://img.youtube.com/vi/JlUjWlVslRg/maxresdefault.jpg')"></lite-youtube>
</div>
</div>

## ASP.NET Core Vue SPA Template 

The [Vue and ASP.NET Core](https://learn.microsoft.com/en-us/visualstudio/javascript/tutorial-asp-net-core-with-vue) 
template provides a seamless starting solution which runs both the .NET API backend and Vite Vue frontend during development.

It's a modern template capturing the best Vue has to offer, configured with Vite's fast HMR (Hot Module Reload) and TypeScript support - 
it allows App's to be developed with Vue's typed [Single File Components](https://vuejs.org/guide/scaling-up/sfc.html) enabling
both a productive development experience and an optimal high-performance production build at runtime.

### End-to-end Typed APIs

Instead of hand-rolled types and Stringly Typed API calls, it utilizes server 
[generated TypeScript DTOs](https://docs.servicestack.net/typescript-add-servicestack-reference)
with a generic JsonServiceClient to enable end-to-end Typed APIs:

```ts
import { ref, onMounted } from 'vue'
import { ApiResult } from "@servicestack/client"
import { useClient } from "@servicestack/vue"
import { GetWeatherForecast } from "@/dtos"

const client = useClient()
const api = ref(new ApiResult())

onMounted(async () => {
    api.value = await client.api(new GetWeatherForecast())
})
```

This benefits in less code to maintain, immediate static typing analysis to ensure correct usage of APIs and valuable 
feedback when APIs are changed, that's easily updated with a single command:

:::sh
npm run dtos
:::

### High Productivity Vue Components

With access to the [ServiceStack Vue Components](https://docs.servicestack.net/vue/) library there's also less code to 
maintain in the UI, where you can render a beautiful tailwind styled DataGrid with just:

```html
<DataGrid :items="api.response" />
```

### Bookings CRUD Pages

Or create a complete CRUD interface with just:

```html
<AutoQueryGrid type="Booking" />
```

The [Bookings CRUD example](https://github.com/NetCoreTemplates/vue-spa/blob/main/MyApp.Client/src/pages/bookings-auto.vue) shows how you can rapidly develop beautiful responsive, customized CRUD UIs with minimal effort using [AutoQuery APIs](https://docs.servicestack.net/autoquery/), [AutoForms](https://docs.servicestack.net/autoform) & [AutoQueryGrid](https://blazor-gallery.servicestack.net/gallery/autoquerygrid) Vue Components.

## ServiceStack Vue SPA Features

Other high-productivity features available in the ServiceStack Vue SPA template include:

### Integrated Identity Auth

Pre-configured with ASP.NET Core Identity Auth, including Sign In and Custom Registration APIs and
UI Pages which can be customized as needed, examples of Role-based security as well as a turn key solution for
Integrating Identity Auth Registration workflow with your [SMTP Provider](https://docs.servicestack.net/auth/identity-auth#smtp-iemailsender)
with all emails sent from a managed non-blocking [Background MQ](https://docs.servicestack.net/background-mq)
for optimal responsiveness and execution.

## Core Technologies

### Frontend

- **Vue 3** - A JavaScript library for building user interfaces
- **Vite 7** - Next Generation Frontend Tooling
- **Tailwind CSS v4** - CSS-first configuration with `@tailwindcss/vite` plugin
- **TypeScript 5** - JavaScript with syntax for types
- **Vitest** - Modern testing framework
- **ServiceStack Vue Components** - Pre-built UI components

### .NET Frontend (Integrated + Optional)
- **Razor Pages** - For Identity Auth UI (`/Identity` routes)

### Backend (.NET 10.0)
- **ServiceStack 10.x** - High-performance web services framework
- **ASP.NET Core Identity** - Complete authentication & authorization system
- **Entity Framework Core** - For Identity data management
- **OrmLite** - ServiceStack's fast, lightweight Typed ORM for application data
- **SQLite** - Default database - [Upgrade to PostgreSQL/SQL Server/MySQL](#upgrading-to-enterprise-database)

## Major Features

### 1. Authentication & Authorization
- ASP.NET Core Identity integration with role-based access control
- Custom user sessions with additional claims
- Admin users feature for user management at `/admin-ui/users`
- Email confirmation workflow (configurable SMTP)
- Razor Pages for Identity UI (`/Identity` routes)
- Credentials-based authentication

### [2. AutoQuery CRUD](#autoquery-crud-dev-workflow)
- Declarative API development with minimal code
- Automatic audit trails (created/modified/deleted tracking)
- Built-in validation and authorization
- Type-safe TypeScript DTOs auto-generated from C# models

### 3. Background Jobs
- `BackgroundsJobFeature` for async task processing
- Command pattern for job execution
- Email sending via background jobs
- Recurring job scheduling support
- Uses monthly rolling Sqlite databases by default - [Upgrade to PostgreSQL/SQL Server/MySQL](#upgrading-to-enterprise-database)

### 4. Developer Experience
- **Admin UI** at `/admin-ui` for App management
- **Health checks** at `/up` endpoint
- **Modular startup** configuration pattern
- **Code-first migrations** with OrmLite
- **Docker support** with container publishing
- **Kamal deployment** configuration included

### 5. Production Features
- Static asset caching with intelligent cache invalidation
- Clean URLs without `.html` extensions
- HTTPS redirection and HSTS
- Data protection with persistent keys
- Health monitoring
- Database developer page for EF Core errors

## Project Structure

```
MyApp/                         # .NET Backend (hosts both .NET and Vite Vue
├── Configure.*.cs             # Modular startup configuration
├── Migrations/                # EF Core Identity migrations + OrmLite app migrations
├── Pages/                     # Identity Auth Razor Pages
└── wwwroot/                   # Production static files (from MyApp.Client/dist)

MyApp.Client/                  # Vue Frontend
├── src/
│   ├── lib/
│   │   ├── dtos.ts            # Auto-generated from C# (via `npm run dtos`)
│   │   ├── gateway.ts         # ServiceStack JsonServiceClient
│   │   └── utils.ts           # Utility functions
│   ├── components/            # Vue components
│   └── styles/                # Tailwind CSS
└── vite.config.ts             # Vite config for dev mode

MyApp.ServiceModel/            # DTOs & API contracts
├── *.cs                       # C# Request/Response DTOs
├── api.d.ts                   # TypeScript data models Schema
└── *.d.ts                     # TypeScript data models for okai code generation

MyApp.ServiceInterface/        # Service implementations
├── Data/                      # EF Core DbContext and Identity models
└── *Services.cs               # ServiceStack service implementations

MyApp.Tests/                   # .NET tests (NUnit)
├── IntegrationTest.cs         # API integration tests
└── MigrationTasks.cs          # Migration task runner

config/
└── deploy.yml                 # Kamal deployment settings
.github/
└── workflows/
    ├── build.yml              # CI build and test
    ├── build-container.yml    # Container image build
    └── release.yml            # Production deployment with Kamal
```

## Development Workflow

### 1. Start Development

:::sh
dotnet watch
:::

This automatically starts both .NET and Vite dev servers.

### 2. Generate TypeScript DTOs

After modifying C# service models, regenerate TypeScript dtos.ts in `MyApp` or `MyApp.Client` with:

:::sh
npm run dtos
:::

### 3. Database Migrations

**OrmLite and Entity Framework:**

:::sh
npm run migrate
:::

**OrmLite (for application data):**

Create migration classes in `MyApp/Migrations/` following the pattern in `Migration1000.cs`.

### 4. Testing

**Frontend:**
```bash
cd MyApp.Client
npm run test        # Run tests in watch mode
npm run test:ui     # Run tests with UI
npm run test:run    # Run tests once
```

::include spa-info.md::

---

### tailwindcss

[Tailwind](https://tailwindcss.com) has quickly become the best modern CSS framework for creating scalable, 
[mobile-first](https://tailwindcss.com/#mobile-first) responsive websites built
upon a beautiful expert-crafted constraint-based [Design System](https://tailwindcss.com/#constraint-based) 
that enables effortless reuse of a growing suite of [Free Community](https://tailwindcomponents.com) and 
professionally-designed [Tailwind UI Component](https://tailwindui.com) Libraries, invaluable for quickly creating beautiful websites.

[![](/img/pages/release-notes/v8.2/tailwindui.png)](https://tailwindcss.com)

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="mx-auto w-40 h-40 text-gray-800" viewBox="0 0 24 24">
    <path fill="currentColor" d="M9.37 5.51A7.35 7.35 0 0 0 9.1 7.5c0 4.08 3.32 7.4 7.4 7.4c.68 0 1.35-.09 1.99-.27A7.014 7.014 0 0 1 12 19c-3.86 0-7-3.14-7-7c0-2.93 1.81-5.45 4.37-6.49zM12 3a9 9 0 1 0 9 9c0-.46-.04-.92-.1-1.36a5.389 5.389 0 0 1-4.4 2.26a5.403 5.403 0 0 1-3.14-9.8c-.44-.06-.9-.1-1.36-.1z"></path>
</svg>

### Dark Mode

In addition to revolutionizing how we style mobile-first responsive Apps, Tailwind's
[Dark Mode](https://tailwindcss.com/#dark-mode) does the same for enabling Dark Mode
a feature supported throughout all of ServiceStack's [Vue Component Library](https://docs.servicestack.net/vue/).

![](/img/pages/release-notes/v8.2/dark-and-light-mode.png)

### Built for Productivity

So that you're immediately productive out-of-the-box, the template includes a rich set of high-productivity features, including:

|                                                                            |                                                              |
|----------------------------------------------------------------------------|--------------------------------------------------------------|
| [tailwind/typography](https://tailwindcss-typography.vercel.app)           | Beautiful css typography for markdown articles & blog posts  |
| [tailwind/forms](https://github.com/tailwindlabs/tailwindcss-forms)        | Beautiful css form & input styles that's easily overridable  |
| [Markdown](https://github.com/markdown-it/markdown-it)                     | Native Markdown integration                                  |
| [plugin/press](https://github.com/ServiceStack/vite-plugin-press)          | Static markdown for creating blogs, videos and other content |
| [plugin/vue-router](https://github.com/posva/unplugin-vue-router)          | Conventional file system based routing for Vue 3 on Vite     |
| [plugin/layouts](https://github.com/JohnCampionJr/vite-plugin-vue-layouts) | Support for multiple page layouts                            |
| [plugin/components](https://github.com/antfu/unplugin-vue-components)      | Auto importing & registering of components on-demand         |
| [plugin/svg](https://github.com/jpkleemans/vite-svg-loader)                | Load SVG files as Vue components                             |
| [Iconify](https://iconify.design)                                          | Unified registry to access 100k+ high quality SVG icons      |