mohole / vue-workshop

Vue + Nuxt 101

Vue + Nuxt Workshop - 18/04/2023 @ Mohole

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/).

Requirements

• Node.js v16+
• VS Code
• Volar (VS Code extension)
• Vue developer tools (browser extension)
• Vercel free account

What we are using

• Vue 3 - reactive UI library
• Nuxt 3 - web framework for Vue
• SASS - CSS with superpowers
• Bootstrap 5 - CSS UI library

API

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.

Table of Contents

• 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

Publishing

This project can be deployed on any Node.js hosting, but to keep things simple & easy we will use the Vercel free tier.

Repository structure

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

Getting started

Clone the repo

$ git clone https://github.com/mohole/vue-workshop

change to project folder

$ cd vue-workshop

install the dependencies

$ npm ci

start the local development server

$ npm run dev

you can now check your application at http://localhost:3000.

Where to go from here

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 /character and /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)

License

Released under the MIT License.