인프런 영문 브랜드 로고
인프런 영문 브랜드 로고
Programming

/

Web Development

Learn Vue js and UI at once / Build a real-time weather app with Nuxt3 + OpenWeatherMap

You can easily learn Nuxt UI, Nuxt SEO, Nuxt Server Api, Pinia, PWA, Firebase, Email Login, Google Login~~

11 students are taking this course

Vue.js
PWA
Firebase
Nuxt.js
pinia

This course is prepared for Basic Learners.

What you will learn!

  • Vue-based web framework Nuxt 3 basic learning

  • Deployment after Nuxt 3 Project Development

  • Firebase Firestore v11

  • Nuxt Official State Management Library Pinia

  • vite-pwa/nuxt PWA(Progressive Web App)

  • Nuxt SEO(Search Engine Optimization)

  • .env(Protecting API keys from client exposure)

  • Login, Signup

  • tailwindcss

  • vue.js

  • Geolocation API

  • Pinia HMR

Creating a real-time weather app with Nuxt3 + OpenWeatherMap?

(Learn Vue.js and UI at once) 🤔

You can learn core modules and components based on Nuxt 3, a front-end framework based on Vue js, for a web/app that provides essential weather information for daily life, and build an optimized web application by applying Pinia state management, API data processing, and SSR. Design a responsive UI with Tailwind CSS and distribute it through Vercel. Through this course, learn the core concepts of Nuxt 3 based on Vue.js, and complete a project that can be used in practice using Pinia, Firebase, and PWA!"

💡 Nuxt 3 Core Function Utilization Course

  • You can learn Vue.js and UI at the same time.

  • Building a Weather App with Nuxt 3: Easy to Follow Even for Beginners



  • You can learn and utilize the main core features of Nuxt 3.

  • Complete configuration from weather API development to distribution


Features of this course

📌 Focused on real-world projects - Develop a practical weather app using Nuxt 3.

📌 API integration learning - Use real-time data using weather APIs such as OpenWeatherMap.

📌 Firebase DB - Manage weather information by converting weather information into a database.

📌 This course is for beginners and intermediate learners. It starts from the basics and progresses step by step, focusing on practical learning.

📌 Deployable and scalable - Deploy your Minden app as an actual service and expand with additional features later.

📌 Vue.js + UI + Nuxt + Tailwind CSS - Fast and efficient UI development

💡 Let’s take a look at the key features and differences:

  • Applying the latest features of Nuxt 3

  • Leveraging Server Routes: Optimizing API calls using Nuxt 3’s server features without a backend

  • Pinia State Management: Applying Clean Data State Management Without Vuex

  • SSR (Server-Side Rendering) & SEO Optimization: Making the Most of Nuxt 3’s Core Features

  • PWA (Progressive Web App): A web app that combines the advantages of the web and native apps, optimized for mobile devices.

  • Vercel Deployment: Deploying your finished app

I recommend this to these people

💡 Who needs this course?

  • People who want to experience real-time data processing and user-friendly UI development.

  • Anyone who needs a portfolio project.

  • People who want to learn API linking and data processing technologies that can be used in practice.

  • People preparing for SaaS development.

  • Developers without experience deploying web services

  • For those who find CSS difficult, minimize CSS writing with predefined utility classes.

For those who know Vuejs but are new to Nuxt3.

Anyone who uses Vue js and wants to learn Nuxt 3

For those who want to create a practical project.
A practical course that goes beyond simple theory and focuses on real-world weather apps

Anyone curious about Pinia & PWA.
Anyone who uses Vuex and wants to learn Pinia or learn web apps

Pinia, more powerful and easier than Vuex

The official state management library for Nuxt 3 that is more concise and powerful than Vuex.

Optimized data management possible on the server side with SSR support

Intuitive store configuration by minimizing duplicate code

Rather than simply attending a lecture, you complete a project that can actually be distributed.

Gain real project experience and learn the basics to develop various API-based projects in the future.

Learn how to retrieve real-time weather data using external APIs and display it efficiently.

Open Weather Map, Dynamic Routes

Learn practical skills by retrieving data from external APIs and utilizing them.

Nuxt Dynamic Routes replaces the router address with the component name for all components created under pages.

Using Nuxt 3 + Firebase Firestore

NoSQL-based highly scalable cloud DB management

Powerful data management without a server

Implement efficient state management by combining Pinia and Firestore

Sign up and log in with Firebase Authentication

Things to note before taking the class

Practice environment

  • The lecture explains based on Windows 10.

  • In this lecture, we will learn Vscode, Node.js 22.

Learning Materials

  • You can get related images and background mp4 data from the data room.

Player Knowledge and Notes

  • javascript

  • Vue.js.

  • Basic CSS knowledge

💡 Notes for learning the lecture

  1. Practice environment

    • Operating System and Version (OS): Windows 10 or later

    • Tools used: Vscode, Github, Firebase, openWeatherMap, etc. are all free, but fees will be charged if usage exceeds a certain amount. However, learning is sufficient with the free usage.


    • PC specifications: CPU Intel i5 8th generation or higher or AMD Ryzen 5 or higher RAM: 8GB or higher, Internet connection

  2. Player Knowledge and Notes

    • Learning is easier if you know the basic grammar of HTML, CSS, and JavaScript.

    • If you have even a passing experience with Vue.js, learning Nuxt 3 will be a breeze.

    • GihHub, Vercel, Google, openWeatherMap accounts

    • OpenWeatherMap account registration is free, but requires card registration.

This template is provided with reference to the lecture ' How does a delivery app find good restaurants near me?'

Recommended for
these people!

Who is this course right for?

  • Quickly learn core features of Vue-based Nuxt

  • Person interested in web development

  • Struggling with DB

  • Seeking to learn PWA(Progressive Web App)

  • Anyone interested in Vue.js

Need to know before starting?

  • vue

  • javascript

Hello
This is

안녕하십니까?

저는 드론맵핑 저자로서, 현재 드론을 이용하여 맵핑에 관심있는 분들에게 필요한 강좌를 개설하였습니다. 처음 드론맵핑을 하고 싶은분들은 무엇부터 시작해야 될지 모르는경우가 많습니다. 이 강좌는 그런 분들을 위하여 꼭 필요한 부분에 대하여 핵심적인 부분을 요약하여 담았습니다. 

또한, Nuxt 3를 활용한 웹 개발 강의를 진행하는 강사입니다. 이 강의에서는 Nuxt 3, Pinia, OpenWeatherMap API, Tailwind CSS를 활용하여 실전 프로젝트인 날씨 앱을 직접 만들어 봅니다. API 연동, 상태 관리, 반응형 UI 설계, 배포까지 배워 실무에서도 활용할 수 있는 기술을 익힐 수 있습니다. 쉽고 실용적인 강의로 Nuxt 3의 핵심을 함께 마스터해 보세요! 🚀

Curriculum

All

39 lectures ∙ (7hr 31min)

Course Materials:

Lecture resources

  • 4. openWeatherMap Api key / Creating Pinia

    06:34

Published: 
Last updated: 

Reviews

Not enough reviews.
Become the author of a review that helps everyone!