Nuxt Report App is a demo Nuxt.js application built by Timi Omoyeni for the Smashing Magazine tutorial "Getting Started With Axios In Nuxt", designed to teach Axios integration, server-side data fetching with asyncData and fetch, and authentication with the auth module. The GitHub repository contains two folders: start and finish, where start is the blank template you build on and finish is the completed reference implementation.
What is Nuxt Report App?
Nuxt Report App is a Vue.js application built on Nuxt.js that serves as a hands-on starter project for the Smashing Magazine tutorial. It uses the @nuxtjs/axios module to make HTTP requests to a demo iReporter API, and it demonstrates both the asyncData and fetch hooks for server-side data loading. The app also integrates the @nuxtjs/auth module for local username/password login, route protection via auth middleware, and a custom Axios plugin for interceptors.
Key Features
- Axios module integration — @nuxtjs/axios automatically sets a base URL for client-side and server-side requests, proxies request headers in SSR, and works with Nuxt's built-in progress bar during requests.
- asyncData hook — Fetches data on the server-side before the page component loads, automatically merges returned data into component data, and is only available inside the pages folder.
- fetch hook — Also fetches data on the server-side, but is available in all .vue files and gives access to the component instance via
this, so it can modify existing data properties.
- Auth module — Uses @nuxtjs/auth with a local strategy, configurable login/logout/home redirects, token name and type customization, and an auth middleware for protecting routes like /my-reports and /report-incident.
- Custom Axios plugin — A plugins/axios.js file demonstrates interceptors that catch 500 errors and redirect to login, and response interceptors that dispatch user data to the Vuex store.
- Vuex store integration — Axios requests are made inside Vuex actions (getIncidents, reportIncident, logOut) and dispatched from components.
- Environment variable configuration — The API endpoint is read from a .env file via process.env.API_URL, avoiding hardcoded URLs.
- FormData submission — The report-incident page sends form fields (title, type, location, comment) as FormData, designed for an API that accepts images and videos.
Who is it for?
- Nuxt.js beginners — Learn the basics of making API requests with the Axios module by following the step-by-step tutorial and editing the start folder.
- Vue developers — Understand the exact differences between the asyncData and fetch hooks, including where they run and what data they can access.
- Developers adding authentication to Nuxt — See a working implementation of the auth module with local strategy, login flow, and protected routes using middleware.
What can you do with Nuxt Report App?
- Fetched incident lists: Call an API endpoint through a Vuex action and display a list of incidents on the home page.
- Load data before page render: Use asyncData to populate an incidents array on the server-side so content appears instantly and supports SEO.
- Submit incident reports: Fill out a form, send it as FormData through a Vuex action, and redirect to a my-reports page on success.
- Protect authenticated routes: Apply the auth middleware to pages so unauthenticated visitors are redirected to a login route.
How does Nuxt Report App work?
The tutorial starts by cloning the repository and running npm install in the start folder. You create a .env file with API_URL, add the @nuxtjs/axios module to nuxt.config.js, and then build features step by step: a Vuex action that fetches incidents, an asyncData block that loads them on the server, a registration form that posts to /user/create, a login form using this.$auth.loginWith, and a protected my-reports page that uses the fetch hook to get user-specific incidents.
