Explore the high productivity features in the new ServiceStack Vue SPA template
## 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