Skip to content

Latest commit

 

History

History

client

README.md

                                   

Nuxt Starter Kit

Client-side Starter Kit used for consomming this OpenAPI Specification (see server sample implementation here), fully based on Tailwind CSS and with inclusion of typescripted API client code generator.

Features

  • Landing homepage template fully based on Tailwind CSS, a 100% CSS utility framework, perfect for fast frontend component oriented development,
  • Simple base pages content (about us, legal notice, etc.),
  • Blog section with tags navigation and pagination support,
  • Contact form with Recaptcha module,
  • PWA Ready with PWA module.

Linters & code styling

Dev notes

  • Router module is used for best flexibility,
  • Even if a style preprocessor (sass/stylus/etc.) is not needed anymore thanks to Tailwind, nested CSS classes is of course supported,
  • API client code is 100% autogenerated with OpenAPI Generator, based on the typescript-fetch template,
  • Typescript is only used for the API client code and nuxt injectors classes, which are the best use cases for this. So we have the best of the 2 worlds :
    • Vue components and pages stay classic vue components. No awful Typescript things. Note as this can be change on the next Vue 3 which will have true Typescript support thanks to the new API composition syntax !
    • API available methods/endpoints has full auto-completion support (with GET and POST parameters and response models with pagination infos) even inside the asyncData method !

Build Setup

  • You should prepare API server first because it is required to generate api client code, which is not included on this repo.
  • Here we suppose that you use http://localhost:8000 as backend base URL.
  • You also need to have Java >= 8 runtime installed to generate API client code !
  • If you prefer to keep the generated code on your repo, simply remove "openapi" on .gitignore.
# install dependencies
$ yarn

# copy .env.example & configure environnement variables

# get the backend api swagger json spec URL at http://localhost:8000/api/documentation and launch openapi tool generator
$ yarn openapi http://localhost:8000/docs/api-docs.json

# serve with hot reload at localhost:3000
$ yarn dev

Deploy

See global README

FAQ

I just want to build Frontend part

I don't want use this shitty java openapi thing

It's just a show-case automatised way to generate api client code. The main drawback is that Swagger documentation must be perfectly manually written on server-side in order to fully comply with all of your backend features.
If you won't support this you're of course free to use directly Axios module in place of it and avoid swagger docs headaches for code generation ;)

License

This project is open-sourced software licensed under the MIT license.