HomeCoursesBuild a Modern Server-Side Rendered Vue Application with NuxtJS

AI-powered learning

Save

Build a Modern Server-Side Rendered Vue Application with NuxtJS

Gain insights into building server-side rendered Vue applications with NuxtJS. Learn about configuration, rendering modes, components, and optimizing for SEO and performance in large-scale projects.

4.4

47 Lessons

2 Projects

22h

Join 2.9 million developers at

LEARNING OBJECTIVES

A thorough understanding of Vue components, composables, and plugins
Hands-on experience building and deploying a fully functional application with NuxtJS
An understanding of the Nuxt rendering modes and the benefits of server-side rendering
Working experience with NuxtJS components, pages, layouts, and middleware
The ability to optimize server-side rendered applications for SEO and performance

Learning Roadmap

47 Lessons1 Project9 Quizzes

Introduction

Get familiar with NuxtJS for building and deploying server-side rendered Vue applications.

Introduction to the Course

What’s the Buzz about NuxtJS?

Course Project

Introduction to Vue.js

Look at core Vue.js concepts, including components, views, routing, rendering, and state management.

Quiz: Introduction to Vue.js

Getting Started with NuxtJS

4 Lessons

Explore NuxtJS integration, directory structure, and unit test configuration for responsive web development.

NuxtJS Rendering Modes

4 Lessons

Break down the steps to selecting the optimal rendering mode for NuxtJS projects.

Routing

3 Lessons

Solve problems in NuxtJS with file-based and custom routing for efficient URL management.

Plugins

3 Lessons

Follow the process of enhancing Nuxt applications with reusable plugins and Vuetify integration.

Layouts

3 Lessons

Piece together the parts of NuxtJS layouts for consistent UI templates and tailored navigation.

Pages

3 Lessons

Step through creating and optimizing pages and meta tags for improved SEO and performance.

Components

3 Lessons

Walk through utilizing and optimizing Nuxt components for enhanced performance and modular development.

10.

API Endpoints, Middleware, and Server-Side State Management

6 Lessons

Work your way through API endpoints, middleware, and state management in NuxtJS.

11.

Putting It All Together

2 Lessons

Apply your skills to create a robust, maintainable Nuxt application with testing best practices.

12.

Deployment

3 Lessons

Solve problems in deploying Nuxt apps with environment variables, Node.js, and Vercel.

Create a Stock Monitor Application Using NuxtJS

Project

13.

Conclusion

Investigate Nuxt’s features and rendering modes, components, server API endpoints, and state management.

Wrap Up

14.

Appendix

3 Lessons

Build on configuring development environments, testing SEO/social tags, and accessing key resources.

E-commerce Store in Vue.js With Payment Integration

Project

Certificate of Completion

Showcase your accomplishment by sharing your certificate of completion.

Developed by MAANG Engineers

ABOUT THIS COURSE

NuxtJS is a framework built on top of Vue that offers additional features and benefits, especially for large-scale and content-driven projects. It provides server-side rendering, which can improve performance and SEO. In this course, you’ll get briefly introduced to Vue, covering components, views, routing, state management, and others. Then, you’ll get acquainted with NuxtJS and learn about configuration and structure for NuxtJS projects. Further, you’ll learn about different NuxtJS rendering modes and the key factors to consider when choosing a mode for the example survey application project. You’ll work with NuxtJS components, pages, layouts, plugins, and middleware. You’ll then develop a complete server-side rendered Vue.js application using NuxtJS and learn about optimizing server-side rendered applications for SEO and performance. By the end of the course, you’ll possess the skills to develop, deploy, and optimize a feature-rich, server-side rendered web application utilizing Vue and NuxtJS.

ABOUT THE AUTHOR

Damilare Adedoyin

Damilare is a software engineer with more than five years of pratical experience working with Fullstack tools. His experience spans a wide range of industries including eCommerce, Fintech, Health Tech and Open source.

Learn more about Damilare

Trusted by 2.9 million developers working at companies

These are high-quality courses. Trust me the price is worth it for the content quality. Educative came at the right time in my career. I'm understanding topics better than with any book or online video tutorial I've done. Truly made for developers. Thanks

Anthony Walker

@_webarchitect_

Just finished my first full #ML course: Machine learning for Software Engineers from Educative, Inc. ... Highly recommend!

Evan Dunbar

ML Engineer

You guys are the gold standard of crash-courses... Narrow enough that it doesn't need years of study or a full blown book to get the gist, but broad enough that an afternoon of Googling doesn't cut it.

Software Developer

Carlos Matias La Borde

I spend my days and nights on Educative. It is indispensable. It is such a unique and reader-friendly site

Souvik Kundu

Front-end Developer

Your courses are simply awesome, the depth they go into and the breadth of coverage is so good that I don't have to refer to 10 different websites looking for interview topics and content.

Vinay Krishnaiah

Software Developer

Course

Building a Jamstack Application with Next.js and Strapi CMS

Build performance-efficient web apps with Next.js and Strapi. Learn static site creation, user authentication, and headless CMS integration in a modern Jamstack architecture.

8 h

beginner

Course

A Hands-on Guide to Angular

Discover Angular's core concepts and advance to building a complete SPA. Gain hands-on experience by creating modules, components, forms, routing, and APIs in an e-commerce app.

16 h

intermediate

Course

React Deep Dive: From Beginner to Advanced

Gain insights into React from basics to advanced, explore its ecosystem, and delve into best practices and the latest straightforward methods for efficient use.

16 h 40 m

beginner

Course

Jump Start with Vue 3

Gain insights into Vue 3’s enhanced reactivity and Composition API. Explore fundamental concepts, components, routing, and TypeScript integration to craft scalable, maintainable web applications.

16 h

beginner

Course

JavaScript in Detail: From Beginner to Advanced

Discover JavaScript fundamentals and advanced concepts, including OOP and asynchronous programming. Gain insights through projects and a final exam, enhancing your skills and portfolio.

12 h

beginner

Course

Building a Jamstack Application with Next.js and Strapi CMS

beginner

8 hour

Course

A Hands-on Guide to Angular

intermediate

16 hour

Course

React Deep Dive: From Beginner to Advanced