add vue ts front work
This commit is contained in:
18
content/_data/works/vue-ts.md
Normal file
18
content/_data/works/vue-ts.md
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
[`Vue 3 TS`](https://vuejs.org/) implementation written with Composition API. Instead of using outdated [Bootstrap v4 alpha 2 theme](https://github.com/gothinkster/conduit-bootstrap-template), I rewrite it on [UnoCSS](https://github.com/unocss/unocss), an awesome efficient Tailwind-like utility-first CSS framework.
|
||||||
|
|
||||||
|
For API communication, as we have full proper OpenAPI spec, it's a real benefit to have a generated Typescript client for full autocompletion feature. I generally hate generated boilerplate code and the well known [OpenAPI Generator](https://github.com/OpenAPITools/openapi-generator) is not very nice to use.
|
||||||
|
|
||||||
|
Thankfully this [openapi-typescript](https://github.com/drwpow/openapi-typescript) package was the perfect solution. It simply translates the OpenAPI spec to a simple Typescript file, with only types. No code generation involved ! In order to work, we need to use a specific **fetch** tool which will use all advanced features of Typescript 4 in order to guess type all the API with only a single TS file in runtime !
|
||||||
|
|
||||||
|
Main packages involved :
|
||||||
|
|
||||||
|
* [Vite](https://vitejs.dev/) as main bundler
|
||||||
|
* [vue-tsc](https://github.com/johnsoncodehk/volar/tree/master/packages/vue-tsc) as main TS checker and compiler for Vue components, with full VS Code support with [Volar](https://github.com/johnsoncodehk/volar) plugin
|
||||||
|
* [ESLint](https://eslint.org/) with [Prettier](https://prettier.io/) for linting and code formatting
|
||||||
|
* [UnoCSS](https://github.com/unocss/unocss) as utility-first CSS framework
|
||||||
|
* [Iconify](https://github.com/iconify/iconify) as universal icons
|
||||||
|
* [Pinia](https://pinia.vuejs.org/) as main store system
|
||||||
|
* [VueUse](https://vueuse.org/) for many composition function helpers
|
||||||
|
* [unplugin-auto-import](https://github.com/antfu/unplugin-auto-import) and [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components) for vue 3 reactivity functions and components auto import, while preserving TS support
|
||||||
|
* [vite-plugin-pages](https://github.com/hannoeru/vite-plugin-pages) and [vite-plugin-vue-layouts](https://github.com/JohnCampionJr/vite-plugin-vue-layouts) for file-based route system with layout support, preventing us maintenance of separated route file, which made the DX similar to [Nuxt](https://nuxtjs.org/)
|
||||||
|
* [openapi-typescript](https://github.com/drwpow/openapi-typescript) as advanced minimal client-side OpenAPI generator which use advanced Typescript features for autodiscovering all API types without any boilerplate code thanks to [separated fetcher](https://github.com/ajaishankar/openapi-typescript-fetch)
|
||||||
@ -2,54 +2,65 @@
|
|||||||
title: Conduit Apps Collection
|
title: Conduit Apps Collection
|
||||||
description: true
|
description: true
|
||||||
projects:
|
projects:
|
||||||
- name: aspnet-core
|
- title: Frontend
|
||||||
title: ASP.NET Core Realworld
|
apps:
|
||||||
repo: adr1enbe4udou1n/aspnetcore-realworld-example-app
|
- name: vue-ts
|
||||||
demo: https://aspnetrealworld.okami101.io/api
|
title: Vue 3 TS Realworld
|
||||||
|
repo: adr1enbe4udou1n/vue-ts-realworld-example-app
|
||||||
|
demo: https://vuetsrealworld.okami101.io
|
||||||
|
color: green
|
||||||
|
|
||||||
- name: spring-boot
|
- title: Backend
|
||||||
title: Spring Boot Realworld
|
apps:
|
||||||
repo: adr1enbe4udou1n/spring-boot-realworld-example-app
|
- name: aspnet-core
|
||||||
demo: https://springbootrealworld.okami101.io/api
|
title: ASP.NET Core Realworld
|
||||||
color: green
|
repo: adr1enbe4udou1n/aspnetcore-realworld-example-app
|
||||||
|
demo: https://aspnetrealworld.okami101.io/api
|
||||||
|
|
||||||
- name: symfony
|
- name: spring-boot
|
||||||
title: Symfony Realworld
|
title: Spring Boot Realworld
|
||||||
repo: adr1enbe4udou1n/symfony-realworld-example-app
|
repo: adr1enbe4udou1n/spring-boot-realworld-example-app
|
||||||
demo: https://symfonyrealworld.okami101.io/api
|
demo: https://springbootrealworld.okami101.io/api
|
||||||
color: black
|
color: green
|
||||||
|
|
||||||
- name: laravel
|
- name: symfony
|
||||||
title: Laravel Realworld
|
title: Symfony Realworld
|
||||||
repo: adr1enbe4udou1n/laravel-realworld-example-app
|
repo: adr1enbe4udou1n/symfony-realworld-example-app
|
||||||
demo: https://laravelrealworld.okami101.io/api
|
demo: https://symfonyrealworld.okami101.io/api
|
||||||
color: orange
|
color: black
|
||||||
|
|
||||||
- name: nestjs
|
- name: laravel
|
||||||
title: NestJS Realworld
|
title: Laravel Realworld
|
||||||
repo: adr1enbe4udou1n/nestjs-realworld-example-app
|
repo: adr1enbe4udou1n/laravel-realworld-example-app
|
||||||
demo: https://nestjsrealworld.okami101.io/api
|
demo: https://laravelrealworld.okami101.io/api
|
||||||
color: red
|
color: orange
|
||||||
|
|
||||||
- name: fastapi
|
- name: nestjs
|
||||||
title: FastAPI Realworld
|
title: NestJS Realworld
|
||||||
repo: adr1enbe4udou1n/fastapi-realworld-example-app
|
repo: adr1enbe4udou1n/nestjs-realworld-example-app
|
||||||
demo: https://fastapirealworld.okami101.io/api
|
demo: https://nestjsrealworld.okami101.io/api
|
||||||
color: teal
|
color: red
|
||||||
|
|
||||||
|
- name: fastapi
|
||||||
|
title: FastAPI Realworld
|
||||||
|
repo: adr1enbe4udou1n/fastapi-realworld-example-app
|
||||||
|
demo: https://fastapirealworld.okami101.io/api
|
||||||
|
color: teal
|
||||||
|
|
||||||
- name: others
|
- name: others
|
||||||
title: Other projects
|
title: Other projects
|
||||||
description: false
|
description: false
|
||||||
projects:
|
projects:
|
||||||
- name: vuetify-admin
|
- apps:
|
||||||
title: Vuetify Admin
|
- name: vuetify-admin
|
||||||
date: 11/2020
|
title: Vuetify Admin
|
||||||
repo: okami101/vuetify-admin
|
date: 11/2020
|
||||||
demo: https://va-demo.okami101.io/
|
repo: okami101/vuetify-admin
|
||||||
docs: https://www.okami101.io/vuetify-admin
|
demo: https://va-demo.okami101.io/
|
||||||
|
docs: https://www.okami101.io/vuetify-admin
|
||||||
|
|
||||||
- name: laravel-rad-stack
|
- name: laravel-rad-stack
|
||||||
title: Laravel RAD Stack
|
title: Laravel RAD Stack
|
||||||
date: 10/2021
|
date: 10/2021
|
||||||
repo: adr1enbe4udou1n/laravel-rad-stack
|
repo: adr1enbe4udou1n/laravel-rad-stack
|
||||||
demo: https://laravel-rad-stack.okami101.io/
|
demo: https://laravel-rad-stack.okami101.io/
|
||||||
|
|||||||
@ -18,36 +18,45 @@
|
|||||||
</div>
|
</div>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
||||||
<div class="grid md:grid-cols-2 gap-4">
|
<div>
|
||||||
{{ range .projects }}
|
{{ range .projects }}
|
||||||
{{ $borders := dict "green" "border-green-500" "orange" "border-orange-500" "black" "border-black dark:border-white"
|
{{ if .title }}
|
||||||
"red" "border-red-500" "teal" "border-teal-500" "primary" "border-purple-500" }}
|
<h3 class="pb-1 font-bold border-b-2 border-purple-500 inline-block mb-4">
|
||||||
<div class="flex flex-col gap-4 rounded border-2 p-4 {{ (index $borders (or .color "primary")) }}">
|
{{ .title }}
|
||||||
<div class="text-center">
|
</h3>
|
||||||
<a href="https://github.com/{{ .repo }}" target="_blank">
|
{{ end }}
|
||||||
<h3 class="pb-1 font-bold border-b-2 border-purple-500 inline-block">
|
<div class="grid md:grid-cols-2 gap-4 mb-4">
|
||||||
{{ .title }}
|
{{ range .apps }}
|
||||||
</h3>
|
{{ $borders := dict "green" "border-green-500" "orange" "border-orange-500" "black" "border-black dark:border-white"
|
||||||
</a>
|
"red" "border-red-500" "teal" "border-teal-500" "primary" "border-purple-500" }}
|
||||||
</div>
|
<div class="flex flex-col gap-4 rounded border-2 p-4 {{ (index $borders (or .color "primary")) }}">
|
||||||
{{ if .date }}
|
<div class="text-center">
|
||||||
<div class="flex justify-end">
|
<a href="https://github.com/{{ .repo }}" target="_blank">
|
||||||
{{ partial "badge.html" (print "Date : " .date) }}
|
<h4 class="pb-1 font-bold border-b-2 border-purple-500 inline-block">
|
||||||
|
{{ .title }}
|
||||||
|
</h4>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
{{ if .date }}
|
||||||
|
<div class="flex justify-end">
|
||||||
|
{{ partial "badge.html" (print "Date : " .date) }}
|
||||||
|
</div>
|
||||||
|
{{ end }}
|
||||||
|
<div class="prose dark:prose-invert flex-grow">
|
||||||
|
{{ readFile (print "_data/works/" .name ".md") | markdownify }}
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-center gap-4">
|
||||||
|
{{ partial "button.html" (dict "text" (partial "icon.html" "github") "href" (print
|
||||||
|
"https://github.com/" .repo) "color" .color) }}
|
||||||
|
{{ if .demo }}
|
||||||
|
{{ partial "button.html" (dict "text" "Demo" "href" .demo "color" .color) }}
|
||||||
|
{{ end }}
|
||||||
|
{{ if .docs }}
|
||||||
|
{{ partial "button.html" (dict "text" "Docs" "href" .docs "color" .color) }}
|
||||||
|
{{ end }}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
<div class="prose dark:prose-invert flex-grow">
|
|
||||||
{{ readFile (print "_data/works/" .name ".md") | markdownify }}
|
|
||||||
</div>
|
|
||||||
<div class="flex justify-center gap-4">
|
|
||||||
{{ partial "button.html" (dict "text" (partial "icon.html" "github") "href" (print
|
|
||||||
"https://github.com/" .repo) "color" .color) }}
|
|
||||||
{{ if .demo }}
|
|
||||||
{{ partial "button.html" (dict "text" "Demo" "href" .demo "color" .color) }}
|
|
||||||
{{ end }}
|
|
||||||
{{ if .docs }}
|
|
||||||
{{ partial "button.html" (dict "text" "Docs" "href" .docs "color" .color) }}
|
|
||||||
{{ end }}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user