ServiceStack Vue

Preview the amazing productivity of @servicestack/vue's beautiful, expertly designed Tailwind Vue components

Learn more
App screenshot

Exceptional support for Vue

In addition to its first-class support for the most popular JavaScript frameworks in its Single Page App Templates, ServiceStack provides its best support for the highly versatile and performant Vue.js framework which is ideal for building both complex SPA & JAMStack Apps or for enhancing Simple, Modern JavaScript Multi Page Websites.

Vue's prowess in creating rich, Reactive UIs in npm build & dependency-free static websites is why it was chosen to power all of ServiceStack's Built-in UIs and our investments in creating the comprehensive @servicestack/vue component library for rapidly developing Tailwind CSS websites where it offers a wide range of beautifully designed, highly productive components that can be easily customized to fit into Tailwind's expert design system whose deep integration with your ServiceStack APIs unlocks end-to-end productivity.

With a focus on performance, accessibility and modern design, this library is the perfect choice for developers looking to rapidly develop fast, beautiful modern Vue.js Tailwind Web Apps and Websites.

Getting Started

Starting with one of ServiceStack's Vue Tailwind Project templates is the easiest way to start rapidly developing beautiful, performant websites with Vue.js, Tailwind CSS and the @servicestack/vue component library:

Vue.js Razor Pages & MVC Templates Overview

All Razor Pages and MVC templates utilize the JS Modules support in modern browsers to avoid any needing any npm build system, for access to more advanced npm library features and to learn about Jamstack CDN and SSG benefits checkout Jamstack Templates docs.

blazor-vue.web-templates.io
razor.web-templates.io
mvc.web-templates.io
razor-ssg.web-templates.io
vue-vite.jamstacks.net
vue-ssg.jamstacks.net

To help choosing which template to start with, here's a quick summary of their differences:

  • blazor-vue - Flagship Blazor + Vue.mjs template complete with OrmLite, AutoQuery & blogs
  • razor - Simpler Razor Pages Template without a configured DB
  • mvc - Want to use MVC Identity Auth and Entity Framework
  • web-tailwind - Empty tailwind template who don't want to use Razor Pages or MVC
  • razor-ssg - Want to create a static generated App with Razor to host on CDNs for Free
  • razor-press - Want to create a static generated Documentation website to host on CDNs
  • vue-vite - Want to use TypeScript in a simpler JAMStack Vite SPA App
  • vue-ssg - Want to use TypeScript in an advanced JAMStack Vite SSG App

For a more in-depth look checkout the video overviews covering the differences between the templates below.

Manual Install

To make use of the Vue.js Tailwind Component Library in existing Websites and Web Apps checkout the @servicestack/vue docs.

Vue Component Library

Explore the high productivity Vue Tailwind components used throughout ServiceStack's Built-In UIs, Vue SPA and Server Rendered Razor Pages projects Learn more

vue autoquery

Instantly Manage your data using AutoQueryGrid Vue

This walkthrough explores the ServiceStack Vue 3 library and the functionality of the AutoQueryGrid component. The AutoQueryGrid component simplifies the integration of AutoQuery services by generating a customizable UI.

By following this guide, you'll learn how to effectively utilize these tools to enhance your application's user interface and overall user experience.

vue autoquery

Vue 3 Tailwind Components Library

In this video, we demonstrate using the @servicestack/vue components library for Vue.js 3 Multipage Apps (MPAs) along with the vue-mjs template.

The template illustrates building content-heavy or complex sites while avoiding the intricacies of Single Page Apps (SPAs) through the use of JavaScript Modules, Tailwind, Vue.js, Razor Pages, and ServiceStack.

Vue Project Templates

Get Started quickly with your preferred Vue.js Tailwind Project Template Learn more

vue autoquery identity-auth

Productive ASP.NET Core Vite Vue SPA Tailwind Template with Identity Auth

In this video we explore the newly updated vue-spa template which has incorporated changes from Microsoft's own SPA templates for .NET 8. We've then enhanced these templates to provide a great developer experience for building web applications with Vue.js, Vite, TypeScript and ServiceStack.

blazor tailwind vue

Fast, SEO-friendly, Blazor Static Rendered Apps with Vue

The new Blazor Vue template is ideal for building Fast, SEO-friendly, 100% statically rendered Blazor Web Apps where all its dynamic functionally uses Vue.js to progressively enhance Blazor's statically rendered content - eliminating Blazor's current limitations of being able to use Blazor SSR to develop an entire App without any of Blazor Interactivity downsides.

The new blazor-vue template implements all the features of the blazor template but reimplements all its interactive features with Vue.js to and the Vue Components library, with both templates combining the latest advancements in Blazor .NET 8 with Tailwind CSS styling for creating beautiful Responsive Websites with support for Dark Mode.

razor-pages mvc tailwind vue

Modern Razor Pages & MVC .NET Tailwind templates

ServiceStack templates provide a wide range of options when it comes to using Razor Pages in your .NET application

These templates come with Tailwind, JS Modules, and Vue components already built-in, making it easy to build hybrid apps containing both Server-Side Rendering (SSR) and static resources

razor-pages ssg tailwind markdown

VitePress and Jekyll alternative for SSG Docs

Introducing Razor Press, a powerful ServiceStack project template for creating documentation and content-centric websites using .NET's Razor Pages, Markdown, Tailwind CSS, and Vue.

Learn how Razor Press aids in the easy creation, and deployment of your statically generated sites that can be hosted for FREE on GitHub Pages CDN

razor-pages ssg markdown codespaces

Using Razor SSG to Create Websites in GitHub Codespaces

This video takes an in-depth look at the razor-ssg ServiceStack template, a powerful tool that harnesses the power of .NET Razor Pages to provide seamless static site generation (SSG) capabilities

With GitHub Codespaces integration, you can develop, test, and manage your application all within your browser, eliminating the need for a dedicated development environment and expediting your workflow, which can all be done on the go from an iPad

vue autoquery

Build beautiful custom .NET Admin UIs in minutes

In this video we explore the Server Multi Razor Page and Client rendered Admin UI Pages in the latest .NET vue-mjs project template to see how to use the new SidebarLayout and AutoQueryGrid Vue Tailwind components to build beautiful Admin UI Pages within minutes.

vue vite jamstack

Ultimate Vue SPA & SSG Jamstack templates for .NET

In this video tutorial, we introduce the vue-ssg template, a powerful combination of Vite, Vue3, and ServiceStack that offers an unparalleled developer experience

This template is specifically designed for .NET developers seeking a seamless and efficient Vue.js setup while employing the Jamstack architecture leveraging capabilities of Vite, Vue & ServiceStack

ServiceStack Vue Documentation