image generated with Microsoft Designer
[ITA]
In questa giornata vedremo come realizzare da zero un catalogo dei personaggi della serie "Rick & Morty" utilizzando il framework Nuxt (basato su Vue.js) e una fonte di dati pubblica (https://rickandmortyapi.com/).
- Node.js v16+
- VS Code
- Volar (VS Code extension)
- Vue developer tools (browser extension)
- Vercel free account
- Vue 3 - reactive UI library
- Nuxt 3 - web framework for Vue
- SASS - CSS with superpowers
- Bootstrap 5 - CSS UI library
The API consumed by the application is https://rickandmortyapi.com/ , which is a public and free API useful for learning and practice, based on the popular animated series.
- icebreaking
- intro + high level concepts
- setup the project
- creating the first page
- preparing more components
- -- lunch break --
- adding the detail page
- pagination
- publish the project
- [optional] live example integrating WordPress
- Q&A
- closing
This project can be deployed on any Node.js hosting, but to keep things simple & easy we will use the Vercel free tier.
| Folder | Description |
|---|---|
(root) |
main config files |
/fundamentals |
theory introduction files |
/components |
components for UI |
/pages |
components that will behave as pages |
/layouts |
shared layout elements |
Clone the repo
$ git clone https://github.com/mohole/vue-workshopchange to project folder
$ cd vue-workshopinstall the dependencies
$ npm cistart the local development server
$ npm run devyou can now check your application at http://localhost:3000.
Feel free to enhance and add features to this project since it's just a sample to give you a glimpse on the basics functionalities of Nuxt and Vue:
- design a better UI (with or without Bootstrap)
- integrate other APIs from the service, you have also access to
/characterand/location - add filters for easily find content
- enhance the pagination component
or ultimately...
- re-use the code of this project with a completely different data source (https://github.com/public-api-lists/public-api-lists)
Released under the MIT License.