Master Nuxt.js - A Vuejs framework by building projects

Next.js is a framework of frameworks that enables server-side rendering, static site generation, and single-page applications, with universal app support, plugins, middleware for authenticated content, and seo-friendly.

Learn to set up a Nuxt.js project from scratch, install dependencies, start a dev server with hot reload, and build home and about pages with automatic routing and nuxt-link navigation.

Create a Next.js app with npx and create-next-app, configure features such as a progressive web app and prettier, choose universal app, and run the dev server locally.

Demonstrate setting up an express server inside a Next.js application, using npm scripts for dev, build, start, and generate, and explain development versus production configurations, including host and port.

Learn how nuxt.js loads plugins by using the plugins directory and nuxt.config.js to register npm packages before mounting the app, including path alias @/plugins and css assets.

Learn how Nuxt.js manages modules by using the modules array and the plugin system. Explore official modules such as axios and pwa and how they load in nuxt.config.js.

Explore how to configure a Nuxt.js app by choosing universal or single-page mode, set global and per-page meta tags for SEO, and manage build and lint settings.

Explains views and routing in Nuxt.js, shows how pages and the layout default integrate, and demonstrates overriding the app dot estimate template to inject scripts during development and build.

Explains how the nuxt.js default layout wraps every page in the app and injects page content, with plans to customize layouts per page in future lessons.

Create a custom layout in the layouts directory, override the default layout, and attach the inspire layout to a page using the layout tag, verified via view dev tool extension.

Create a custom error page in Nuxt by using error.vue in the layouts folder. Apply an error layout, pass the error prop, and display a friendly 404 not found message.

Explore how the pages directory auto-creates routes like /about by adding about.vue, and how page-specific features, such as head, script, data, and fetch, apply only to pages.

Override the page meta description by configuring head meta as an array, using a unique head id to replace the existing description, improving open graph description and SEO.

Navigate between home, about, and inspire using nuxt link and router link variants, including next link and n-link, in the layouts directory of a Nuxt.js app.

Create dynamic routes in the Nuxt pages directory using underscores for blog slugs, and load the index view or a dynamic underscore blog view to render posts.

Create dynamic routes with a slug as blog post identifier and access it via this.$route.params. Validate the slug with a numeric regex, and show a not-found page on invalid input.

Learn how to create and apply middleware in Next.js to run code before rendering pages, including a test.js function and optional global middleware in next.config.js.

Clean up the default layout to start a weather app, set up an indigo toolbar with white text, and configure navigation to the weather app page.

Create a weather app page in a nuxt.js project using a v container and card with a city name text field, styled in blue gray with centered typography.

Explore fetching weather data with the open weather map API, sign up for an API key, and access temperature, humidity, wind, and weather icons for a weather app.

Fetch weather data by calling the API when the component is created, using the city parameter and API key. Define the endpoint, handle the response, and display weather information.

Demonstrates dynamic weather data by typing a city and submitting a form to fetch weather information with a get weather info method in a Nuxt.js and Vue.js project.

Show a city weather card in Nuxt.js by binding weather data to a card, displaying city name, temperature, and a weather icon via a computed property, with a centered layout.

Show the mean temperature from the weather data, convert Kelvin to Celsius, round the result, and render the degrees Celsius in the Nuxt.js weather app.

Show the weather description after the temperature in a four-page weather app, using a span for description, add caption styling, and plan to display min and max temperatures later.

discover how to enable server side rendering in a Nuxt.js app by fetching weather data for a city before rendering, using async data and route parameters.

Build a weather user interface in Nuxt.js that displays wind speed and direction, humidity, and pressure by pulling data from OpenWeatherMap and binding dynamic values in Vue components.

Show the final step of displaying max and min temperatures in a Nuxt.js weather app, converting kelvin to celsius by subtracting 273, and updating the right section.

Master Nuxt.js teaches cleaning up v-if after server-side data loads, resolving server-side rendering issues, and moving the weather app idea into environment variables with dotenv.

Install and configure the dotenv module in a Nuxt.js project, move environment keys to a .env file, and access them with process.env in the weather app.

Learn how to set up a Vuex store in Nuxt.js and share state across components, including user login status, via a store directory with an index file returning the state object.

Access and update a Vuex store state in Nuxt.js component using a computed getter for the course, a setter to commit a mutation, and a setCourse mutation to apply changes.

Discover how to use vuex getters to derive state, such as uppercasing the course name, and learn how to access and invoke the getter from a component.

Move the weather app to a Vuex store by creating a weather module with city (default London) and weather state, plus mutations like setCity and actions to fetch weather.

Move weather data from a component local state to a central store using fetch, enabling server-side rendering and store mutations to populate weather module before the component loads.

Learn how to implement Vuex actions in Nuxt.js by dispatching get weather info, using context to access state, and update weather with set weather while avoiding direct state mutation.

Refactor a weather app by modularizing the Vuex state and dispatching get weather info to avoid duplication. Reuse computed getters to clean up code and improve maintainability.

Create a simple quiz app by scaffolding a quiz page in a Nuxt.js project, using a v layout, v card, and four radio options in a front-end view.

Learn to implement a submit button and a radio group in Vue/Nuxt, bind selections with v-model, and handle the submission before wiring a Firebase backend.

Create an admin questions page in nuxt.js, scaffolding the route and building a form with a question field, four options, a correct-answer radio group, and a firebase-ready submit.

Learn to set up a Firebase real-time database in test mode, configure read and write rules, and use the REST API to read and write data for your Nuxt.js projects.

Bind a dynamic quiz form in vue/nuxt by modeling a quiz object with a question and four options, plus a separate correct answer. Submit via post.

Store questions to Firebase by creating a quiz collection with questions and options, then create and link answers to each question, handling success and errors.

Learn to store quiz answers in Firebase by creating an answers collection linked to each question and the chosen option.

Fetch questions from Firebase using the rest api and populate the admin all-questions data table, wiring the create page and api call for /questions.json.

Learn to display and manage quiz questions by mapping firebase data to a questions list, and add edit, delete, and correct answer indicators for options 1–4.

Develop the update question flow by building the edit page, fetching the question by key from firebase, and applying a patch to save changes before returning to admin questions.

Query firebase by question id to fetch the corresponding answers using order by, and adjust rules to return the correct answer for a specific question.

Learn how to update a quiz answer in a Nuxt.js project by patching firebase data, updating the selected option, and routing to admin/questions after saving.

Learn to destroy a specific question and its related answer in a Nuxt.js app by destroying the question first, then deleting the answer using the question id.

Refactor the quiz app by extracting delete question and delete answer into dedicated methods, aligning fetch logic into a clear destroy flow with a unified base URL for API calls.

This course currently offers one Nuxt.js project, with a second quiz application planned soon; future plans include deploying the project to DigitalOcean and a domain setup.

Build an admin login form using Firebase authentication with email/password. Learn to obtain an ID token via the Firebase REST API and store it in cookies to gate admin access.

Learn how to implement login in a Nuxt.js app using email and password, verify and store a secure token in cookies, and manage logout and protected routes.

Implement server-side authentication in Nuxt.js by using nuxtServerInit to read cookies, commit a logged-in state, and hydrate tokens from cookies into the store.

Implement logout in a Nuxt.js app by accessing the store from a plugin, toggling the 'logged in' state, and removing the logout button when the cookie is cleared.

Create a guest middleware to redirect logged-in users from the login page to admin/questions using store state, and apply an auth middleware to protect admin create/edit routes.

Fix permission denied by wiring an axios plugin in Nuxt to attach the auth token from cookies to every request, aligning with Firebase Realtime Database authentication rules.

Learn to build the front end for a quiz by fetching questions from the back end, rendering them as cards with bound options, and creating a reusable card component.

Learn to fetch and verify the correct answer from firebase on submit by using a per-question key, passing it as a prop, and comparing the response.

Bind the radio button color to an answer color function that returns black when no result, green for correct, and red for incorrect, demonstrated through submit interactions.

learn to implement a client-side only notification system using an npm library, with a notify plugin, server-side rendering avoidance via config, and triggering a success message for correct answers.