ServiceStack Vue

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

Learn more

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.

vue-mjs.web-templates.io
razor-tailwind.web-templates.io
mvc-tailwind.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:

  • vue-mjs - Flagship Vue.mjs template complete with OrmLite, AutoQuery & blogs
  • razor-tailwind - Simpler Razor Pages Template without a configured DB
  • mvc-tailwind - 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
  • 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

ServiceStack Vue Documentation