This course teaches how to build a modern server-side rendered web application using Vue.js and Nuxt.js.

Build a Modern Server Side Rendered Vue Application with NUXT JS.png

tarball.tar.gz

vue_js_refresher_create_template

nuxt_code

nuxt_code-unit-tests

nuxt_code-with-node-server

node-server-sql-only

learner-node-deploy

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.

Build a Modern Server-Side Rendered Vue Application with NuxtJS

**(Select all that apply.)** Which component in Nuxt is used to define meta tags for specific pages?

(Select all that apply.) Which component in Nuxt is used to define meta tags for specific pages?

The `useSeoMeta/useServerSeoMeta` composable

Which composable in Nuxt helps in defining the `head` tag properties, including the `meta` tags?

Which composable in Nuxt helps in defining the <code>head</code> tag properties, including the <code>meta</code> tags?

Which composable is the preferred method for defining the `meta` tags on a specific page in a Nuxt project?

Which composable is the preferred method for defining the <code>meta</code> tags on a specific page in a Nuxt project?

Boosting visibility and attracting more traffic to a website

What is the role of defining necessary pages and optimizing them for search engines in effective SEO?

What is the role of defining necessary pages and optimizing them for search engines in effective SEO?

What is a way to set `meta` tags in a NuxtJS project?

What is a way to set <code>meta</code> tags in a NuxtJS project?

The `useHead/useHeadSafe` and `useSeoMeta/useServerSeoMeta` composables

The `useMeta/useSafeMeta` and `useSeoMeta/useServerSeoMeta` composables

The `useHead/useMeta` and `useSafeMeta/useServerMeta` composables

The `useHead/useSeoMeta` and `useMeta/useServerMeta` composables

What are the two sets of composables provided by Nuxt for defining `meta` tags?

What are the two sets of composables provided by Nuxt for defining <code>meta</code> tags?

Test your knowledge on setting up search engine optimized pages in Nuxt that are in line with the users’ requirements.

Introduction

Introduction to Vue.js

Getting Started with NuxtJS

NuxtJS Rendering Modes

Routing

Plugins

Layouts

Pages

Components

API Endpoints, Middleware, and Server-Side State Management

Putting It All Together

Deployment

Create a Stock Monitor Application Using NuxtJS

Conclusion

Appendix

Quiz: Pages