Gain insights into using NuxtJS for server-side rendered Vue apps. Explore configuration, rendering modes, and components. Discover strategies to optimize SEO and performance for content-rich projects.

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

In the previous lessons, we discussed the system recommended methods for defining routes. However, the production environment might require some additional settings that might not be compatible with the configuration. For example, a developer might want to set up a route for an additional page which could be situated outside the `pages` directory. This is where the custom routing configuration comes in.

There are multiple methods of setting up custom routes in a Nuxt application. They could be set up by using one of the following:
- The router options configuration
- A custom module
- A hook

## Using the router options configuration
This configuration file lies in the `app/router.options.ts` path in a Nuxt project. It contains custom configuration options for the Vue Router, which is the routing library used by Nuxt for client-side routing.

Configuring custom routes on the Nuxt application would only require setting a callback to the `routes` property. This would ensure that the other routes automatically configured by Nuxt are being preserved.

The `routes` property specifies the routes to be used by the Vue Router. This could be an array of route objects or a callback returning an array of route objects. In this array, each route object defines the path, component, and other options for a specific route in the application.

Here are other common options that can be configured in the `router.options.ts` file:

- `mode`: It specifies the routing mode to be used by the Vue Router. This can be set to `hash` for hash mode, `history` for history mode, or `abstract` for abstract mode.

- `base`: It specifies the base URL for the application. This can be useful when deploying the application to a subdirectory on a web server.

- `fallback`: It specifies the fallback behavior when navigating to a route that does not exist. This can be set to `true` to enable fallback behavior or set to `false` to disable it.

- `linkActiveClass`: It specifies the CSS class to be applied to active links in the application. This can be set to a string representing the CSS class name.

- `linkExactActiveClass`: It specifies the CSS class to be applied to exact active links in the application. This can be set to a string representing the CSS class name.

The disadvantage of using the router options configuration is that it could get complicated for large applications.

### Example
In this example, a custom page was created in the `custom-pages` directory called `creator-profile.vue` and added to the other application routes using router options.

Note how the router options configuration located in the `app/router.options.ts` path merges the route to the custom page with the other routes in the application.

Learn how to enhance the Nuxt app with custom routes using different methods.

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

Custom Routing

How to set up custom routes

Using the router options configuration