Create a new room Booking for our {{serviceName}} hotels.
Here are some
good tips on making room reservations
`,
setup() {
const server = inject('server')
return { serviceName: server.app.serviceName }
}
}
```
### Dynamic Components
[QueryTodos](https://blazor-vue.web-templates.io/ui/QueryTodos?tab=details) is a more advanced example that generates a dynamic UI shared by all TODO APIs
that generate its reactive **Mini Navigation UI** users can use to cycle through **all TODO API docs** with a `v-href="{ op }"` custom directive:
{{humanize(op.request.name)}}
{{apis[op.request.name]}}
`,
setup() {
const store = inject('store')
const op = computed(() => store.op)
const otherApis = computed(() => apiNames.filter(x => x !== store.op.request.name)
.reduce((acc,x) => { acc[x] = apis[x]; return acc }, {}))
return {
op,
apis,
otherApis,
humanize,
}
}
}
const components = apiNames.reduce((acc, x) => { acc[x + 'Docs'] = TodosDocs; return acc }, {})
app.components(components)
}
```
## Built-in App functionality
### JavaScript Libraries
Your custom components can utilize built in libraries embedded in ServiceStack.dll where they will have access to the latest [Vue 3](https://vuejs.org/guide/introduction.html) reactive fx, [@servicestack/client](/javascript-client) client library and [Vue 3 Tailwind Component library](/vue/) which they can import by package name, e.g:
```js
import { ref } from "vue"
import { useClient } from "@servicestack/vue"
import { humanify } from "@servicestack/client"
```
**Static Analysis**
As all package dependencies are written in TypeScript you can install them as dev dependencies to get static analysis from its TypeScript definitions at dev time:
```bash
npm install -D vue
npm install -D @servicestack/client
npm install -D @servicestack/vue
```
Your components can access your Apps Typed DTOs directly from the [ES6 Module DTO endpoint](/javascript-add-servicestack-reference) at `/types/mjs`, e.g:
```js
import { QueryCoupons } from "/types/mjs"
```
#### App functionality
Your components access to most App functionality via the injected dependencies for functionality defined in API Explorer's [app.mjs](https://github.com/ServiceStack/ServiceStack/blob/main/ServiceStack/tests/NorthwindAuto/ui/lib/app.mjs):
```js
const app = inject('app') // App for customizing Vue App, register components, providers, plugins, etc
const client = inject('client') // JsonServiceClient for API Calls
const server = inject('server') // AppMetadata (metadata for your Server App and APIs)
const store = inject('store') // API Explorer's Reactive object model
const routes = inject('routes') // usePageRoutes() Reactive store to manage its SPA routing
const breakpoints = inject('breakpoints') // useBreakpoints() Reactive store to Tailwind responsive breakpoints
```
Most of which creates instance of common library features in [core.mjs](https://github.com/ServiceStack/ServiceStack/blob/main/ServiceStack/tests/NorthwindAuto/wwwroot/js/core.mjs) that are documented at [api.locode.dev/modules/explorer.html](https://api.locode.dev/modules/explorer.html).
You're also not limited with what's in API Explorer, with full access to [JavaScript Modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules)
you can import external 3rd Party packages the same way you import built-in packages.
### Built-in API Docs
ServiceStack's own built-in APIs uses custom API Doc components itself to document its APIs, e.g. [/ui/docs/RegisterDocs.mjs](https://github.com/ServiceStack/ServiceStack/blob/main/ServiceStack/src/ServiceStack/modules/ui/docs/RegisterDocs.mjs)
```js
export const RegisterDocs = {
template:`
Register API
Public API users can use to create a new User Account, can be added to your AppHost with:
`
}
```
Generates docs for the built-in **Register** API that includes **C#** Syntax highlighting using the pre-configured [highlightjs](https://highlightjs.org) directive:
If you'd like to, you can add personalized links for users in different roles, e.g. this is what's used to populate the above UI for Admins:
```csharp
appHost.AddToAppMetadata(meta =>
{
meta.Plugins.Auth.RoleLinks[RoleNames.Admin] = new List
Control types are based on the property types in your DTOs.
| UI Input | Data Types |
| ----------------------- | ---------- |
| `