@servicestack/vue is a component library for Vue.js and Tailwind CSS offering 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 websites.
Component Gallery
Explore Vue Tailwind Component Gallery
AutoQueryGrid
Instant customizable UIs for calling AutoQuery CRUD APIs
DataGrid
DataGrid Component Examples for rendering tabular data
Auto Forms
Render Auto Form UIs from a Request DTO class
Form Inputs
Tailwind UI Input Components
Modals
Modal Dialogs, Slide Overs & SignIn forms
Navigation
Tabs, Breadcrumbs and Link navigation components
Alerts
Tailwind Alert and Notification components
Formats
HTML Value Formatters
Explore API Library Features
useMetadata
Reflective utils for inspecting API AppMetadata
useClient
Utilize JSON Api Client features in Components
useAuth
Inspect Authenticated Users Info, Roles & Permissions
useFormatters
Built-in Formats and formatting functions
useFiles
File utils for resolving SVG icons, extensions and MIME types
useConfig
Manage global configuration & defaults
useUtils
General functionality and utils
Getting Started
Starting with one of ServiceStack's Vue + Tailwind Project templates below is the easiest way to get started which are pre-configured with @servicestack/client and @servicestack/vue libraries:
Jamstack Vue Tailwind Templates
Empty Vue Tailwind
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.js Razor Pages & MVC Templates Overview
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, boosted htmx links & static pre-rendered blogs
- razor-tailwind - Simpler Razor Pages Template without a configured DB or static pre-rendered blogs
- 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
- 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 we've created an overview covering the differences between the Razor Pages & MVC templates:
Manual Installation
Alternatively it can be added to existing Vue SPA Apps by installing via npm:
$ npm install @servicestack/vue
Where it will also install its vue and @servicestack/client dependencies.
Installation-less option
Alternatively you can take advantage of modern browsers JS Modules support to use these libraries without installation by registering an importmap to define where it should load the ESM builds of these libraries from, e.g:
<script type="importmap">
{
"imports": {
"vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.prod.js",
"@servicestack/client": "https://unpkg.com/@servicestack/client@2/dist/servicestack-client.min.mjs",
"@servicestack/vue": "https://unpkg.com/@servicestack/vue@3/dist/servicestack-vue.min.mjs"
}
}
</script>
For intranet Web Apps that need to work without internet access, save and reference local copies of these libraries, e.g:
<script type="importmap">
{
"imports": {
"vue": "/lib/mjs/vue.mjs",
"@servicestack/client": "/lib/mjs/servicestack-client.mjs",
"@servicestack/vue": "/lib/mjs/servicestack-vue.mjs"
}
}
</script>
@Html.ImportMap
Razor Pages or MVC Apps can use the Html.ImportMaps()
to use local debug builds during development and optimal CDN hosted minified production builds in production:
@Html.ImportMap(new()
{
["vue"] = ("/lib/mjs/vue.mjs", "https://unpkg.com/vue@3/dist/vue.esm-browser.prod.js"),
["@servicestack/client"] = ("/lib/mjs/servicestack-client.mjs", "https://unpkg.com/@servicestack/client@2/dist/servicestack-client.min.mjs"),
["@servicestack/vue"] = ("/lib/mjs/servicestack-vue.mjs", "https://unpkg.com/@servicestack/vue@3/dist/servicestack-vue.min.mjs")
})
It's recommended to use exact versions to eliminate redirect latencies and to match the local version your App was developed against
Polyfill for Safari
Unfortunately Safari is the last modern browser to support import maps which is only now in Technical Preview. Luckily this feature can be polyfilled with the pre-configured ES Module Shims:
@if (Context.Request.Headers.UserAgent.Any(x => x.Contains("Safari") && !x.Contains("Chrome")))
{
<script async src="https://ga.jspm.io/npm:es-module-shims@1.6.3/dist/es-module-shims.js"></script>
}
Registration
Then register the @servicestack/vue
component library with your Vue app with:
import { JsonApiClient } from "@servicestack/client"
import ServiceStackVue from "@servicestack/vue"
const client = JsonApiClient.create()
const app = createApp(component, props)
app.provide('client', client)
app.use(ServiceStackVue)
//...
app.mount('#app')
The client instance is used by API-enabled components to call your APIs using the /api predefined route. ServiceStack Apps not running on .NET 6+ or have the /api route disabled should use JsonServiceClient
instead:
const client = new JsonServiceClient()
Not using Vue Router
Non SPA Vue Apps that don't use Vue Router should register a replacement <router-link>
component that uses the browser's native navigation in navigational components:
app.component('RouterLink', ServiceStackVue.component('RouterLink'))