2.5 KiB
Vue 3 TS implementation written with Composition API. Instead of using outdated Bootstrap v4 alpha 2 theme, I rewrite it on 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 is not very nice to use.
Thankfully this 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 as main bundler
- vue-tsc as main TS checker and compiler for Vue components, with full VS Code support with Volar plugin
- ESLint with Prettier for linting and code formatting
- UnoCSS as utility-first CSS framework
- Iconify as universal icons
- Pinia as main store system
- VueUse for many composition function helpers
- unplugin-auto-import and unplugin-vue-components for vue 3 reactivity functions and components auto import, while preserving TS support
- vite-plugin-pages and 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
- 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