강의

멘토링

커뮤니티

BEST
Programming

/

Front-end

Getting Started with Nuxt.js

If you want your Vue.js site to reach more people? This is a great course for those who have completed Captain Pangyo's Vue.js series and now want to try server-side rendering. Getting Started with Nuxt.js course!

(4.9) 127 reviews

1,664 learners

Level Intermediate

Course period Unlimited

  • captain
Nuxt.js
Nuxt.js
Vue.js
Vue.js
ssr
ssr
Nuxt.js
Nuxt.js
Vue.js
Vue.js
ssr
ssr

Reviews from Early Learners

Reviews from Early Learners

4.9

5.0

toki moki

100% enrolled

I am a backend developer. After listening to the best lectures by Jang Gi-hyo, I am becoming very interested in web development. But the final form of the system I want to implement is Nuxt3(SEO) + Vue3. I heard that Nuxt3 was recently released. I would like to request training based on Nuxt3. I watched the Vuetify2 YouTube video and it wasn't as difficult as I thought. I think Vuetify3 will be released in the first half of next year according to the official website. Thank you for the great training. ^^

5.0

mj Song

100% enrolled

There are still no or rare books or lectures related to nuxt in Korea, so this was very helpful. Do you have any plans for a semi-practical level clone coding nuxt lecture?? For example, using a package like nuxt-auth to configure or configure an API module... I wonder how you would configure it in nuxt!!

5.0

찬규

100% enrolled

I'm a college student who has been studying hard for 2 months because I became interested in front-end! I studied vaguely on my own and didn't understand anything and it was so hard, but I happened to come across Captain Pangyo and I'm currently listening to all the lectures and reviewing them! Thanks to him, I feel like I'm studying in a good directionㅜㅜ The lectures are really good and this Nuxt lecture was also very helpful. I'm really grateful to you personally! I'll jump right in and take the new lectures as soon as they come out in the futureㅠㅠ

What you will gain after the course

  • Server Side Rendering

  • Vue.js Development

  • Frontend development

Meet Server-Side Rendering with Nuxt.js!
Now use Vue.js more powerfully.

Want to use Vue.js better?

Vue.js를 사용하는 프론트엔드 개발자라면 Nuxt.js로 서버사이드렌더링을 구현할 수 있어요.

If you're a Vue developer, you can implement
server-side rendering through Nuxt.


But,
what is server-side rendering? 🤔

Server-side rendering is a technique where the server draws the page and sends it to the client (browser) to be displayed on the screen. Server-side rendering technology is used for search engine optimization (SEO: Search Engine Optimization) and to accurately deliver your site information on SNS.

To implement this server-side rendering, the framework that Vue.js developers commonly use is Nuxt.js. It plays a role in exposing your site to more people.

However, since there are still no specialized Nuxt.js courses in Korea and not many reference materials available, I've often received requests to create a class. I hope this course will be a useful resource for those who need to develop services with Nuxt.js.


To help those who are starting with Nuxt.js.

From project creation to service deployment,
we cover everything you need to know
when developing with Nuxt.

"I need to use Nuxt, but how is the development approach different from Vue?"
This course is suitable for those unfamiliar with server-side rendering concepts and those who need to develop with Nuxt.js at work but have never used it before. Let's learn together how Nuxt.js differs from traditional Vue.js development by building part of a simple shopping mall site.

✅ Those starting with Nuxt.js for the first time
✅ Those who know basic Vue.js development concepts but are not familiar with server-side rendering
✅ Those who are working on a Nuxt.js project at work but find it difficult to know where to start
✅ Frontend developers interested in server-side rendering


Meet the instructor
who created this course 😎

Learn the know-how from
a working industry developer 🎁


Check out the unique features
of this course ✨

Course materials are provided.

The well-written course materials and diagrams will help you easily understand the key concepts related to Nuxt.js and server-side rendering covered in this course.

Build a website yourself.

You can naturally acquire the advantages and syntax of Nuxt.js while building a shopping mall site. (Over 70% hands-on practice)

naturally compare the structures.

The content from Captain Pangyo's Vue.js series naturally connects to the Nuxt.js course, explained by comparing it with the structure of single-page applications.

📢 Please check the prerequisites!


Here's what you'll learn
in this course 🎈

Server-Side Rendering

We explain in detail the differences from developing with a project created using the existing Vue CLI, the operational mechanism of server-side rendering, and its benefits.

Understanding Server-Side Rendering Operation

It helps you easily understand the concepts you've learned by comparing actual sites with and without SSR applied.

Understanding Layout Patterns

We provide detailed explanations of the diagrams for understanding Nuxt.js layout components and the differences from traditional single-page applications.

Nuxt.js ESLint Rules

Explains the enhanced ESLint rules in Nuxt.js compared to Vue CLI projects. Examines how ESLint is actually applied in the code.

Backend API Server Configuration and Integration

We will guide you through configuring a backend API server for shopping mall site development. A guide will be provided for the server configuration process so you can proceed on your own even after the class.

Component Design Approach

We guide you through component design approaches that need to be considered in component-based frameworks like React and Vue, and review the implemented content.

Building a Website Similar to a Shopping Mall

We'll build a shopping mall-like website by integrating it with a real API. During the development process, we'll apply Nuxt.js concepts one by one in sequence and explore the differences from traditional Vue.js applications.

Markup & Styling - Only What's Necessary

We'll only do the main layout markup and styling needed for screen development, with detailed styling provided through the GitHub repository source code. This allows you to focus on learning Nuxt.js concepts, enabling fast and efficient learning.


Frequently Asked Questions 💬

Q. I'm new to Vue.js - can I still take this course?

This course is suitable for those who are familiar with the basic concepts of Vue.js. Nuxt.js can be viewed as a framework that adds a few more rules to the basic knowledge you need to know when developing with Vue.js. I recommend taking Captain Pangyo's Vue.js series courses from Beginning to Mastery first before taking this course.

Q. I don't know anything about server-side rendering concepts. Can I still take this course?

Yes, you can take this course. It not only covers Nuxt.js APIs and usage, but also thoroughly explains in detail why server-side rendering is beneficial and what the differences are compared to traditional client-side rendering (single page applications). After completing the course, you'll have a solid understanding of server-side rendering concepts.

Q. I'm new to frontend development. Is it okay to take this course?

This course is not suitable for those who are completely new to frontend development. The course is structured for those who have a basic understanding of HTML, CSS, and JS. At minimum, I recommend taking this course after understanding the basic concepts of Vue.js and the concept of single page applications using routers.

Q. Vue.js 3 has been released, so will this be taught using Vue 3? Or will it use Vue 2?

This course is based on Vue 2. Since the official version of Nuxt.js based on Vue 3 has not been released yet and Vue 3 also has many limitations for use in production environments, this course was created based on Vue 2, which can be applied immediately after learning. Please note that Vue 3 content will be additionally updated once the Vue 3-based ecosystem becomes stable :)

※ Everything you learn with Vue 2 can be applied directly to Vue 3. The difference between Vue 2 and Vue 3 is about one major API difference, and there isn't a significant difference overall.


Curious about
Captain Pangyo's other courses?

About the Instructor 👨‍🏫

Captain Pangyo

"People Inflearn Met" Interview

"I donate to Vue.js open source +
OpenTutorials with my lecture revenue 😁"

We're offering a course discount!

Series "Frontend
Developer Roadmap with Vue.js" 25% Discount (Click)

Student 50% discount for middle and high school students
and college students without income (Click)

Recommended for
these people

Who is this course right for?

  • People who are just starting with Nuxt.js

  • People who want to learn server-side rendering

  • People who want to create a high-traffic website using Vue.js

  • Frontend Developer

  • Publisher

  • Job seeker

Need to know before starting?

  • Getting Started with Vue.js

  • Vue.js Intermediate

  • Vue.js Complete Guide

  • Mastering Vue.js

Hello
This is

49,267

Learners

4,853

Reviews

3,816

Answers

4.9

Rating

19

Courses

I have been sharing knowledge on Inflearn for 8 years. 🏠 Tech Blog, 📣 Twitter, 💻 GitHub

📗 Do it! Vue.js Introduction, Easy TypeScript and 3 other books authored
📖 Cracking Vue.js, TypeScript Handbook, Webpack Handbook. 3 online free guidebooks authored
👨‍💻 Operating Captain Pangyo's Frontend Development YouTube Channel - A place to hear the concerns of job seekers and junior developers
🥤 Operating Captain Pangyo's KakaoTalk Open Chat Room - A place to get the latest frontend development information and hear the thoughts and concerns of industry peers

Curriculum

All

73 lectures ∙ (6hr 11min)

Published: 
Last updated: 

Reviews

All

127 reviews

4.9

127 reviews

  • fordev님의 프로필 이미지
    fordev

    Reviews 6

    Average Rating 5.0

    5

    100% enrolled

    I am a backend developer. After listening to the best lectures by Jang Gi-hyo, I am becoming very interested in web development. But the final form of the system I want to implement is Nuxt3(SEO) + Vue3. I heard that Nuxt3 was recently released. I would like to request training based on Nuxt3. I watched the Vuetify2 YouTube video and it wasn't as difficult as I thought. I think Vuetify3 will be released in the first half of next year according to the official website. Thank you for the great training. ^^

    • mjso님의 프로필 이미지
      mjso

      Reviews 6

      Average Rating 5.0

      5

      100% enrolled

      There are still no or rare books or lectures related to nuxt in Korea, so this was very helpful. Do you have any plans for a semi-practical level clone coding nuxt lecture?? For example, using a package like nuxt-auth to configure or configure an API module... I wonder how you would configure it in nuxt!!

      • chan9yu님의 프로필 이미지
        chan9yu

        Reviews 1

        Average Rating 5.0

        5

        100% enrolled

        I'm a college student who has been studying hard for 2 months because I became interested in front-end! I studied vaguely on my own and didn't understand anything and it was so hard, but I happened to come across Captain Pangyo and I'm currently listening to all the lectures and reviewing them! Thanks to him, I feel like I'm studying in a good directionㅜㅜ The lectures are really good and this Nuxt lecture was also very helpful. I'm really grateful to you personally! I'll jump right in and take the new lectures as soon as they come out in the futureㅠㅠ

        • captain
          Instructor

          Oh my, Chan-gyu, thank you so much for the great review! Haha Please look forward to future lectures. I will prepare a real lecture! :)

      • rnlghdals7335님의 프로필 이미지
        rnlghdals7335

        Reviews 8

        Average Rating 5.0

        5

        100% enrolled

        Since I only used Vue, there were a lot of things that had to be set up from the beginning, but since I use the Nuxt framework, there are a lot of things that are supported, and SSR is a big advantage.

        • captain
          Instructor

          Right, if you have some knowledge of views, I think it's actually easier to start with Nuxt.

      • derrickrodo님의 프로필 이미지
        derrickrodo

        Reviews 72

        Average Rating 5.0

        5

        82% enrolled

        This is a very good lecture. I recommend it to anyone who wants to study Nuxt.js.

        • captain
          Instructor

          Thank you for your first class review, Ronaluyoung :)

      $42.90

      captain's other courses

      Check out other courses by the instructor!

      Similar courses

      Explore other courses in the same field!