From dba3d82abcbda52f12993f99413aa9dea287413f Mon Sep 17 00:00:00 2001 From: Demis Bellot Date: Wed, 6 Mar 2024 22:53:45 +0800 Subject: [PATCH] Update Vue + React SPA Template docs --- MyApp/_pages/templates/react.md | 387 +++++++++++++++++++--------- MyApp/_pages/templates/sidebar.json | 24 +- MyApp/_pages/templates/vue.md | 302 +++++++++++++++++----- 3 files changed, 506 insertions(+), 207 deletions(-) diff --git a/MyApp/_pages/templates/react.md b/MyApp/_pages/templates/react.md index 7fac57fc1..0743c6ba0 100644 --- a/MyApp/_pages/templates/react.md +++ b/MyApp/_pages/templates/react.md @@ -1,162 +1,309 @@ --- -slug: templates-react -title: React Project Templates +title: React SPA Project Template --- -
- - - - - - -
- -[React](https://reactjs.org) is a very popular JavaScript Library developed by Facebook to simplify creating complex UIs through use of -declarative encapsulated components which can be used to build both Web and Native iOS/Android Applications with -[React Native](https://facebook.github.io/react-native/). - -## React .NET Core and .NET Framework Single Page App Templates - -The templates below have been -[seamlessly integrated](/templates/single-page-apps#end-to-end-typed-apis) into -ServiceStack's [Recommended Physical Project Structure](/physical-project-structure). - -See the documentation in each project for more info on features of each template: - -### [React 16 SPA Template](https://github.com/NetCoreTemplates/react-spa) - -Bootstrapped with [create-react-app](https://github.com/facebook/create-react-app). - -[![](https://raw.githubusercontent.com/ServiceStack/Assets/master/csharp-templates/react-spa.png)](https://github.com/NetCoreTemplates/react-spa) - -Create new React 16 Project for .NET 6.0: - -```bash -$ x new react-spa ProjectName +## ServiceStack React SPA Template + +The new TypeScript [Vite React SPA template](https://react-spa.web-templates.io) is an enhanced version of .NET's +built-in ASP.NET Core React SPA template with many new value-added and high-productivity features. + +
+
+ + +
+
+
+

+ Vite React SPA Template +

+

+ Explore the high productivity features in the new ServiceStack React SPA template +

+
+ +
+
+ +:::{.text-center} +## Live Demo +::: + +:::{.shadow .pb-1} +[![](https://raw.githubusercontent.com/ServiceStack/Assets/master/csharp-templates/react-spa.png)](https://react-spa.web-templates.io) +::: + +## ASP.NET Core React SPA Template + +The [React and ASP.NET Core](https://learn.microsoft.com/en-us/visualstudio/javascript/tutorial-asp-net-core-with-react) +template provides a seamless starting solution which runs both the .NET API backend and Vite React frontend during development. + +It's a modern template enabling an excellent developer workflow for .NET React Apps, configured with Vite's fast +HMR (Hot Module Reload), TypeScript support with TSX enabling development of concise and expressive type-safe components. + +### Minimal API integration + +Whilst a great starting point, it's still only a basic template configured with a bare-bones React Vite App that's modified +to show an example of calling a Minimal API. + +### Built-in API Integration + +Although the approach used isn't very scalable, with a proxy rule needed for every user-defined API route: + +```ts +export default defineConfig({ + //... + server: { + proxy: { + '^/weatherforecast': { + target, + secure: false + } + }, + } +}) ``` -Create new React 16 Project for .NET Framework: +And the need for hand maintained Types to describe the shape of the API responses with [Stringly Typed](https://wiki.c2.com/?StringlyTyped) +fetch API calls referencing **string** routes: + +```ts +interface Forecast { + date: string; + temperatureC: number; + temperatureF: number; + summary: string; +} + +function App() { + const [forecasts, setForecasts] = useState(); + + useEffect(() => { + populateWeatherData(); + }, []); + //... +} + +async function populateWeatherData() { + const response = await fetch('weatherforecast'); + const data = await response.json(); + setForecasts(data); +} +``` + +Which is used to render the API response in a hand rolled table: + +```tsx +function App() { + //... + const contents = forecasts === undefined + ?

Loading... Please refresh once the ASP.NET backend has started. See + jsps for more details. +

+ : + + + + + + + + + + {forecasts.map(forecast => + + + + + + + )} + +
DateTemp. (C)Temp. (F)Summary
{forecast.date}{forecast.temperatureC}{forecast.temperatureF}{forecast.summary}
; +} +``` + +### ServiceStack API Integration + +Fortunately ServiceStack can significantly improve this development experience with the +[/api pre-defined route](https://docs.servicestack.net/endpoint-routing#api-pre-defined-route) where only a single +proxy rule is needed to proxy all APIs: + +```ts +export default defineConfig({ + //... + server: { + proxy: { + '^/api': { + target, + secure: false + } + }, + } +}) +``` + +### End-to-end Typed APIs -```bash -$ x new react-spa-netfx ProjectName +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 { useState, useEffect } from "react" +import { useClient } from "@/gateway" +import { GetWeatherForecast } from "@/dtos" + +const client = useClient() +const [forecasts, setForecasts] = useState([]) + +useEffect(() => { + (async () => { + const api = await client.api(new GetWeatherForecast()) + if (api.succeeded) { + setForecasts(api.response!) + } + })() +}, []) ``` -### [React Desktop Apps Template](https://github.com/NetFrameworkTemplates/react-desktop-apps-netfx) +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 +::: + +### React Component Ecosystem + +Given it's popularity, React has arguably the richest ecosystem of freely available libraries and components, a good +example are the popular [shadcn/ui](https://ui.shadcn.com) Tailwind components. Unlike most libraries they're source copied +piecemeal into your project where they're locally modifiable, i.e. instead of an immutable package reference. -The React Desktop Template is a single VS .NET template which supports packaging your Web App into 4 different ASP.NET, Winforms, OSX Cocoa -and cross-platform Console App Hosts: +As they're just blueprints, they're not dependent on a single library and will utilize the best library to implement +each component if needed. E.g. the [Data Table](https://ui.shadcn.com/docs/components/data-table) component documents how to implement +your own Data Table utilizing the headless [TanStack Table](https://tanstack.com/table/latest) - a version of which +we've built into [DataTable.tsx](https://github.com/NetCoreTemplates/react-spa/blob/main/MyApp.Client/src/components/DataTable.tsx) +which is used in the template to implement both complex CRUD UIs and +[weather.tsx](https://github.com/NetCoreTemplates/react-spa/blob/main/MyApp.Client/src/pages/weather.tsx) simple table results: -[![](https://raw.githubusercontent.com/ServiceStack/Assets/master/csharp-templates/react-desktop-apps-netfx.png)](https://github.com/NetFrameworkTemplates/react-desktop-apps-netfx) +```tsx +import { columnDefs, DataTable, getCoreRowModel } from "@/components/DataTable.tsx" -Create new React Project for .NET Framework: +const columns = columnDefs(['date', 'temperatureC', 'temperatureF', 'summary'], + ({ temperatureC, temperatureF}) => { + temperatureC.header = "Temp. (C)" + temperatureF.header = "Temp. (F)" + temperatureC.cell = temperatureF.cell = ({ getValue }) => <>{getValue()}° + }) -```bash -$ x new react-desktop-apps-netfx ProjectName +return ( + +) ``` -# React Examples +To render the [/weather](https://react-spa.web-templates.io/weather) customized Data Table: -## [Gistlyn](https://github.com/ServiceStack/Gistlyn) - a C# Gist IDE powered by Roslyn +:::{.mx-auto .max-w-lg .shadow .rounded} +[![](/img/pages/release-notes/v8.2/data-table.png)](https://react-spa.web-templates.io/weather) +::: -Gistlyn is the ultimate collaborative tool for trying out and exploring C# and .NET libraries on NuGet -from a zero install - modern browser. It's ideal for use as a companion tool for trying out libraries during -development or on the go from the comfort of your iPad by going to [gistlyn.com](http://gistlyn.com). +The template also includes customizable [Form.tsx](https://github.com/NetCoreTemplates/react-spa/blob/main/MyApp.Client/src/components/Form.tsx) +Input components which can be used to create beautiful validation-bound forms which effortlessly integrates with ServiceStack's +[Error Handling](https://docs.servicestack.net/error-handling) and +[Declarative Validation](https://docs.servicestack.net/declarative-validation) attributes. -[![](https://raw.githubusercontent.com/ServiceStack/Assets/master/img/livedemos/gistlyn/home-screenshot.png)](https://github.com/ServiceStack/Gistlyn) +## ServiceStack React SPA Features -## [Web, Node.js and React Native ServerEvents Apps](https://github.com/ServiceStackApps/typescript-server-events) +Other high-productivity features available in the ServiceStack React SPA template include: -Using TypeScript ServerEvents Client to create real-time Web, node.js server and React Native Mobile Apps: +### Integrated Identity Auth -[![](https://raw.githubusercontent.com/ServiceStack/Assets/master/img/livedemos/typescript-serverevents/typescript-server-events-banner.png)](https://github.com/ServiceStackApps/typescript-server-events) +Pre-configured with ASP.NET Core Identity Auth, including Sign In and Custom Registration APIs and +UI Pages which can be customized as needed, examples of Role-based security as well as a turn key solution for +Integrating Identity Auth Registration workflow with your [SMTP Provider](https://docs.servicestack.net/auth/identity-auth#smtp-iemailsender) +with all emails sent from a managed non-blocking [Background MQ](https://docs.servicestack.net/background-mq) +for optimal responsiveness and execution. -## [React Chat](https://github.com/ServiceStackApps/ReactChat) +### tailwindcss -React Chat is a port of [ServiceStack Chat](https://github.com/ServiceStackApps/Chat) ES5, jQuery Server Events -demo into a [TypeScript](http://www.typescriptlang.org/), [React](http://facebook.github.io/react/) and -[Redux](https://github.com/reactjs/redux) App: +[Tailwind](https://tailwindcss.com) has quickly become the best modern CSS framework for creating scalable, +[mobile-first](https://tailwindcss.com/#mobile-first) responsive websites built +upon a beautiful expert-crafted constraint-based [Design System](https://tailwindcss.com/#constraint-based) +that enables effortless reuse of a growing suite of [Free Community](https://tailwindcomponents.com) and +professionally-designed [Tailwind UI Component](https://tailwindui.com) Libraries, invaluable for quickly creating beautiful websites. -![](https://raw.githubusercontent.com/ServiceStack/Assets/master/img/livedemos/chat-react/screenshot.png) +[![](/img/pages/release-notes/v8.2/tailwindui.png)](https://tailwindcss.com) -Developed using the latest [TypeScript + Redux + JSPM + Gulp](https://github.com/ServiceStackApps/typescript-react-template/) VS.NET Template + -### [Networked Time Traveller Shape Creator](https://github.com/ServiceStackApps/typescript-redux#example-9---real-time-networked-time-traveller) +In addition to revolutionizing how we style mobile-first responsive Apps, Tailwind's +[Dark Mode](https://tailwindcss.com/#dark-mode) does the same for enabling Dark Mode +a feature supported throughout the template and its Tailwind UI Components. -A network-enhanced version of the -[stand-alone Time Traveller Shape Creator](https://github.com/ServiceStackApps/typescript-redux#example-8---time-travelling-using-state-snapshots) -that allows users to **connect to** and **watch** other users using the App in real-time similar -to how users can use Remote Desktop to watch another computer's screen: +[![](/img/pages/release-notes/v8.2/dark-mode.png)](https://tailwindcss.com/#dark-mode) -[![](https://raw.githubusercontent.com/ServiceStack/Assets/master/img/livedemos/redux-chrome-safari.png)](http://redux.servicestack.net) +### Built for Productivity -> Live demo: http://redux.servicestack.net +So that you're immediately productive out-of-the-box, the template includes a rich set of high-productivity features, including: -The client code required to enable real-time communication is encapsulated within a single -[React Connect component](https://github.com/ServiceStackApps/typescript-redux/blob/master/src/TypeScriptRedux/src/example09/Connect.tsx) -whilst the server implementation is only comprised of -[2 simple Server Event Services](https://github.com/ServiceStackApps/typescript-redux/blob/master/src/TypeScriptRedux/Global.asax.cs) -that lets users publish their actions to a channel or send a direct message to another User. +| | | +|---------------------------------------------------------------------|--------------------------------------------------------------| +| [tailwind/typography](https://tailwindcss-typography.vercel.app) | Beautiful css typography for markdown articles & blog posts | +| [tailwind/forms](https://github.com/tailwindlabs/tailwindcss-forms) | Beautiful css form & input styles that's easily overridable | +| [Markdown](https://mdxjs.com/docs/getting-started/) | Native [mdx](https://mdxjs.com) Markdown integration | +| [React Router](https://reactrouter.com) | Full featured routing library for React | +| [plugin/press](https://github.com/ServiceStack/vite-plugin-press) | Static markdown for creating blogs, videos and other content | +| [plugin/pages](https://github.com/hannoeru/vite-plugin-pages) | Conventional file system based routing for Vite | +| [plugin/svg](https://github.com/pd4d10/vite-plugin-svgr) | Load SVG files as React components | +| [Iconify](https://iconify.design) | Unified registry to access 100k+ high quality SVG icons | -## [Redis React](https://github.com/ServiceStackApps/RedisReact) +### Bookings CRUD Pages -Redis React is a simple user-friendly UI for browsing data in Redis servers that leverages -the navigation and deep-linking benefits of a Web-based UI, the productivity and responsiveness of the -[React framework](http://facebook.github.io/react/) -and deep Integration possible from a Native App. +The [Bookings CRUD example](https://react-spa.web-templates.io/bookings-crud) shows how you can utilize a customized +Data Table and templates Form components to create a beautifully styled CRUD UI with minimal effort. -[![](https://raw.githubusercontent.com/ServiceStack/Assets/master/img/livedemos/redis-react/home.png)](http://redisreact.servicestack.net/#/) +## Vite Press Plugin -[![](https://raw.githubusercontent.com/ServiceStack/Assets/master/img/livedemos/redis-react/home.png)](http://redisreact.servicestack.net/#/) +[![](https://images.unsplash.com/photo-1524668951403-d44b28200ce0?crop=entropy&fit=crop&h=384&w=768)](https://vue-spa.web-templates.io/posts/vite-press-plugin) -> Downloads for [Windows, OSX, Linux and Web](https://github.com/ServiceStackApps/RedisReact#download) +Most Apps typically have a mix of dynamic functionality and static content which in our experience is best maintained +in Markdown, which is why excited about the new [Vite Press Plugin](https://vue-spa.web-templates.io/posts/vite-press-plugin) +which brings the same Markdown features in our +[razor-ssg](https://razor-ssg.web-templates.io), [razor-press](https://razor-press.web-templates.io) and our +[blazor-vue](https://blazor-vue.web-templates.io) templates, and re-implements them in Vite where they can be used +to add the same rich content features to Vite Vue and Vite React Apps. -## [React Chat Desktop](https://github.com/ServiceStackApps/ReactChatApps) +A goal for vite-press-plugin is to implement a suite of universal markdown-powered features that can be reused across all +our Vue, React and .NET Razor and Blazor project templates, allowing you to freely copy and incorporate same set of +markdown feature folders to power markdown content features across a range of websites built with different technologies. -A port of -[React Chat](https://github.com/ServiceStackApps/Chat-React) -built with the new -[React Desktop Apps](https://github.com/ServiceStackApps/ReactDesktopApps) -VS.NET template and packaged into a native Desktop App for Windows and OSX. -It takes advantage of -[Server Events](/server-events) to enable synchronized -real-time control of multiple Windows Apps: +All of Razor SSG's features are available in Vite Press Plugin, including: -[![](https://raw.githubusercontent.com/ServiceStack/Assets/master/img/livedemos/react-desktop-apps/dancing-windows.png)](https://youtu.be/-9kVqdPbqOM) +- [Blog](https://vue-spa.web-templates.io/blog) - Full Featured, beautiful Tailwind Blog with multiple discoverable views +- [What's New](https://vue-spa.web-templates.io/whatsnew) - Build Product and Feature Release pages +- [Videos](https://vue-spa.web-templates.io/videos) - Maintain Video Libraries and Playlists +- [Metadata APIs](https://vue-spa.web-templates.io/posts/vite-press-plugin#metadata-apis-feature) - Generate queryable static .json metadata APIs for all content +- [Includes](https://vue-spa.web-templates.io/posts/vite-press-plugin#includes-feature) - Create and reuse Markdown fragments -> Downloads for [Windows, OSX, Linux and Web](https://github.com/ServiceStackApps/ReactChatApps#downloads) +It also supports an enhanced version of markdown for embedding richer UI markup in markdown content where most of +[VitePress Containers](https://vitepress.dev/guide/markdown#custom-containers) are supported, including: -## [React Desktop Apps](https://github.com/ServiceStackApps/ReactDesktopApps) +- [Custom Markdown Containers](https://vue-spa.web-templates.io/posts/vite-press-plugin#markdown-containers) + - **Alerts** + - `info` + - `tip` + - `warning` + - `danger` + - `copy` + - `sh` + - `youtube` +- [Markdown Fenced Code Blocks](https://vue-spa.web-templates.io/posts/vite-press-plugin#markdown-fenced-code-blocks) - Convert fenced code blocks into Richer UIs -React Desktop Apps take advantage of the adaptability, navigation and deep-linking benefits of a Web-based UI, the productivity and responsiveness of the -[React framework](https://facebook.github.io/react/), -the performance, rich features and functionality contained in -[ServiceStack](https://github.com/ServiceStack/ServiceStack/wiki) and the .NET Framework combined with the native experience and OS Integration possible from a Native Desktop App - all within a single VS .NET template! +### React Components In Markdown -[![React Desktop Apps](https://raw.githubusercontent.com/ServiceStack/Assets/master/img/gap/react-desktop-splash.png)](https://github.com/ServiceStackApps/ReactDesktopApps) +At the cost of reduced portability, you’re also able to embed richer Interactive Vue components directly in markdown: -> Downloads for [Windows, OSX, Linux and Web](https://github.com/ServiceStackApps/ReactDesktopApps#downloads) +- [React Components in Markdown](https://react-spa.web-templates.io/posts/markdown-components-in-react) \ No newline at end of file diff --git a/MyApp/_pages/templates/sidebar.json b/MyApp/_pages/templates/sidebar.json index 19875f08f..f8eb7eece 100644 --- a/MyApp/_pages/templates/sidebar.json +++ b/MyApp/_pages/templates/sidebar.json @@ -15,6 +15,14 @@ "text": "Blazor Components", "link": "/templates/blazor-components" }, + { + "text": "Vite Vue SPA Templates", + "link": "/templates/vue" + }, + { + "text": "Vite React SPA Templates", + "link": "/templates/react" + }, { "text": "Jamstack Templates", "link": "/templates/jamstack" @@ -35,26 +43,10 @@ "text": "Single Page App Templates", "link": "/templates/single-page-apps" }, - { - "text": "Vue and React \"lite\" Templates", - "link": "/templates/lite" - }, - { - "text": "Vuetify Templates", - "link": "/templates/vuetify" - }, { "text": "Nuxt Templates", "link": "/templates/nuxt" }, - { - "text": "Vue Templates", - "link": "/templates/vue" - }, - { - "text": "React Templates", - "link": "/templates/react" - }, { "text": "Svelte Templates", "link": "/templates/svelte" diff --git a/MyApp/_pages/templates/vue.md b/MyApp/_pages/templates/vue.md index f80ebd32b..f69be11d5 100644 --- a/MyApp/_pages/templates/vue.md +++ b/MyApp/_pages/templates/vue.md @@ -1,120 +1,280 @@ --- -slug: templates-vue -title: Vue Project Templates +title: Vue SPA Project Template --- -
+The latest [Vue SPA](https://github.com/NetCoreTemplates/vue-spa) template is a good example of this, building on and enhancing +the built-in ASP.NET Core Vue SPA template with many high-productivity features. + +
+
+ + +
+
+
+

+ Vite Vue SPA Template +

+

+ Explore the high productivity features in the new ServiceStack Vue SPA template +

+
+ +
+
+ +:::{.text-center} +## Live Demo +::: -[Vue.js](https://vuejs.org) is a very popular incrementally adoptable JavaScript Framework designed for simplicity so it's easy to learn but -also capable of powering sophisticated Single-Page Applications that includes a vibrant community and a rich ecosystem of -[Components & Libraries](https://github.com/vuejs/awesome-vue#components--libraries). +:::{.shadow .pb-1} +[![](https://raw.githubusercontent.com/ServiceStack/Assets/master/csharp-templates/vue-spa.png)](https://vue-spa.web-templates.io) +::: +## ASP.NET Core Vue SPA Template -## Vue .NET Core and .NET Framework Single Page App Templates +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. -The templates below have been bootstrapped with the latest vue-cli and nuxt tooling and -[seamlessly integrated](/templates/single-page-apps#end-to-end-typed-apis) into -ServiceStack's [Recommended Physical Project Structure](/physical-project-structure). +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. -See the documentation in each project for more info on features of each template: +### Minimal API integration -### [Vue 2.5 SPA Template](https://github.com/NetCoreTemplates/vue-spa) +Whilst a great starting point, it's still only a basic template configured with a bare-bones Vue Vite App that's modified +to show an example of calling a Minimal API. -Bootstrapped with [Vue CLI 3](https://cli.vuejs.org/). +### Built-in API Integration - +Although the approach used isn't very scalable, with a proxy rule needed for every user-defined API route: -::: info YouTube -[youtu.be/4HphWPrKwb0](https://youtu.be/4HphWPrKwb0) -::: +```ts +export default defineConfig({ + //... + server: { + proxy: { + '^/weatherforecast': { + target, + secure: false + } + }, + } +}) +``` -[![](https://raw.githubusercontent.com/ServiceStack/Assets/master/csharp-templates/vue-spa.png)](https://github.com/NetCoreTemplates/vue-spa) +And the need for hand maintained Types to describe the shape of the API responses with [Stringly Typed](https://wiki.c2.com/?StringlyTyped) +fetch API calls referencing **string** routes: + +```ts +import { defineComponent } from 'vue'; + +type Forecasts = { + date: string, + temperatureC: string, + temperatureF: string, + summary: string +}[]; + +interface Data { + loading: boolean, + post: null | Forecasts +} + +export default defineComponent({ + data(): Data { + return { + loading: false, + post: null + }; + }, + created() { + // fetch the data when the view is created and the data is + // already being observed + this.fetchData(); + }, + watch: { + // call again the method if the route changes + '$route': 'fetchData' + }, + methods: { + fetchData(): void { + this.post = null; + this.loading = true; + + fetch('weatherforecast') + .then(r => r.json()) + .then(json => { + this.post = json as Forecasts; + this.loading = false; + return; + }); + } + }, +}); +``` -Create new Vue 2.5 Project for .NET 6.0: +Which is used to render the API response in a hand rolled table: + +```html +
+ + + + + + + + + + + + + + + + + +
DateTemp. (C)Temp. (F)Summary
{{ forecast.date }}{{ forecast.temperatureC }}{{ forecast.temperatureF }}{{ forecast.summary }}
+
+``` -```bash -$ x new vue-spa ProjectName +### ServiceStack API Integration + +Fortunately ServiceStack can significantly improve this development experience with the +[/api pre-defined route](https://docs.servicestack.net/endpoint-routing#api-pre-defined-route) where only a single +proxy rule is needed to proxy all APIs: + +```ts +export default defineConfig({ + //... + server: { + proxy: { + '^/api': { + target, + secure: false + } + }, + } +}) ``` -Create new Vue 2.5 Project for .NET Framework: +### 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()) -```bash -$ x new vue-spa-netfx ProjectName +onMounted(async () => { + api.value = await client.api(new GetWeatherForecast()) +}) ``` -### [Vuetify SPA Template](https://github.com/NetCoreTemplates/vuetify-spa) +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: -Bootstrapped with [Vue CLI 3](https://cli.vuejs.org/) and the [vuetify cli plugin](https://github.com/vuetifyjs/vue-cli-plugin-vuetify). +:::sh +npm run dtos +::: -[![](https://raw.githubusercontent.com/ServiceStack/Assets/master/csharp-templates/vuetify-spa.png)](https://github.com/NetCoreTemplates/vuetify-spa) +### High Productivity Vue Components -Create new Vuetify Project for .NET 6.0: +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: -```bash -$ x new vuetify-spa ProjectName +```html + ``` -Create new Vuetify Project for .NET Framework: +## ServiceStack Vue SPA Features -```bash -$ x new vuetify-spa-netfx ProjectName -``` +Other high-productivity features available in the ServiceStack Vue SPA template include: -### [Nuxt SPA Template](https://github.com/NetCoreTemplates/vue-nuxt) +### Integrated Identity Auth -Bootstrapped with [Nuxt.js starter template](https://nuxtjs.org/guide/installation). +Pre-configured with ASP.NET Core Identity Auth, including Sign In and Custom Registration APIs and +UI Pages which can be customized as needed, examples of Role-based security as well as a turn key solution for +Integrating Identity Auth Registration workflow with your [SMTP Provider](https://docs.servicestack.net/auth/identity-auth#smtp-iemailsender) +with all emails sent from a managed non-blocking [Background MQ](https://docs.servicestack.net/background-mq) +for optimal responsiveness and execution. -[![](https://raw.githubusercontent.com/ServiceStack/Assets/master/csharp-templates/vue-nuxt.png)](https://github.com/NetCoreTemplates/vue-nuxt) +### tailwindcss -Create new Nuxt.js v1.4.2 Project for .NET 6.0: +[Tailwind](https://tailwindcss.com) has quickly become the best modern CSS framework for creating scalable, +[mobile-first](https://tailwindcss.com/#mobile-first) responsive websites built +upon a beautiful expert-crafted constraint-based [Design System](https://tailwindcss.com/#constraint-based) +that enables effortless reuse of a growing suite of [Free Community](https://tailwindcomponents.com) and +professionally-designed [Tailwind UI Component](https://tailwindui.com) Libraries, invaluable for quickly creating beautiful websites. -```bash -$ x new vue-nuxt ProjectName -``` +[![](/img/pages/release-notes/v8.2/tailwindui.png)](https://tailwindcss.com) -Create new Nuxt.js v1.4.2 Project for .NET Framework: + -```bash -$ x new vue-nuxt-netfx ProjectName -``` +### Dark Mode -### [Nuxt and Vuetify SPA Template](https://github.com/NetCoreTemplates/vuetify-nuxt) +In addition to revolutionizing how we style mobile-first responsive Apps, Tailwind's +[Dark Mode](https://tailwindcss.com/#dark-mode) does the same for enabling Dark Mode +a feature supported throughout all of ServiceStack's [Vue Component Library](https://docs.servicestack.net/vue/). -Bootstrapped with [Nuxt.js + Vuetify.js starter template](https://github.com/vuetifyjs/nuxt). +![](/img/pages/release-notes/v8.2/dark-and-light-mode.png) -[![](https://raw.githubusercontent.com/ServiceStack/Assets/master/csharp-templates/vuetify-nuxt.png)](https://github.com/NetCoreTemplates/vuetify-nuxt) +### Built for Productivity -Create new Nuxt Vuetify Project for .NET 6.0: +So that you're immediately productive out-of-the-box, the template includes a rich set of high-productivity features, including: -```bash -$ x new vuetify-nuxt ProjectName -``` +| | | +|----------------------------------------------------------------------------|--------------------------------------------------------------| +| [tailwind/typography](https://tailwindcss-typography.vercel.app) | Beautiful css typography for markdown articles & blog posts | +| [tailwind/forms](https://github.com/tailwindlabs/tailwindcss-forms) | Beautiful css form & input styles that's easily overridable | +| [Markdown](https://github.com/markdown-it/markdown-it) | Native Markdown integration | +| [plugin/press](https://github.com/ServiceStack/vite-plugin-press) | Static markdown for creating blogs, videos and other content | +| [plugin/vue-router](https://github.com/posva/unplugin-vue-router) | Conventional file system based routing for Vue 3 on Vite | +| [plugin/layouts](https://github.com/JohnCampionJr/vite-plugin-vue-layouts) | Support for multiple page layouts | +| [plugin/components](https://github.com/antfu/unplugin-vue-components) | Auto importing & registering of components on-demand | +| [plugin/svg](https://github.com/jpkleemans/vite-svg-loader) | Load SVG files as Vue components | +| [Iconify](https://iconify.design) | Unified registry to access 100k+ high quality SVG icons | -Create new Nuxt Vuetify Project for .NET Framework: +### Bookings CRUD Pages -```bash -$ x new vuetify-nuxt-netfx ProjectName -``` +Bookings CRUD example shows how you can rapidly develop beautiful responsive, customized CRUD UIs with minimal effort using +[AutoQuery APIs](https://docs.servicestack.net/autoquery/), [AutoForms](https://docs.servicestack.net/autoform) & +[AutoQueryGrid](https://blazor-gallery.servicestack.net/gallery/autoquerygrid) Vue Components. -# Vue Examples +### Admin Pages -## [New TechStacks](https://github.com/NetCoreApps/TechStacks) +Whilst Bookings CRUD is a good example of creating custom UI for end users, you may also want to quickly develop a set +of back-office CRUD Admin UIs to manage your App's Database tables, which is easily achievable AutoQueryGrid's default +behavior: -TechStacks makes it easy to find, discuss and share information on your favorite technologies with others sharing similar interests: +
+ +
-[![](/img/pages/release-notes/techstacks-new.png)](https://techstacks.io) +The development UX of Admin Pages is further improved in Vue Vite which is able to use SFC Pages and conventional file system +routing to quickly add Admin Pages to manage an App's back-end tables, e.g: -::: info Live Demo -[techstacks.io](https://techstacks.io) -::: +#### [/admin/coupons.vue](https://github.com/NetCoreTemplates/vue-spa/blob/main/MyApp.Client/src/pages/admin/coupons.vue) -#### Features +```html + +``` - - [Recommended .NET SPA Stack](https://github.com/NetCoreApps/TechStacks#recommended-net-spa-stack) - - [Netlify CDN static hosting](https://github.com/NetCoreApps/TechStacks#netlify-cdn) - - [Reddit, HN, Discourse and StackOverflow Community Enhanced features](https://github.com/NetCoreApps/TechStacks#the-new-community-enhanced-techstacks) - - [Simple rsync Deployments](https://github.com/NetCoreApps/TechStacks#deployments) - - [Client / Server Validation with Vuetify](https://github.com/NetCoreApps/TechStacks#client--server-validation-with-vuetify) - - [Extensible AutoQuery Services](https://github.com/NetCoreApps/TechStacks#extensible-autoquery-services) - - [Background MQ Email Service](https://github.com/NetCoreApps/TechStacks#background-mq-service) +#### [/admin/bookings.vue](https://github.com/NetCoreTemplates/vue-spa/blob/main/MyApp.Client/src/pages/admin/bookings.vue) +```html + +``` \ No newline at end of file