Introduction

Subdomains offer a powerful way to structure and organize your web application’s routing. In this article, we will explore how to leverage subdomains in Nuxt 3 to achieve advanced routing capabilities and enhance the user experience.

Understanding Subdomains in Nuxt 3

Routing is a fundamental aspect of web development, and Nuxt 3 provides a versatile routing system. By default, Nuxt 3 uses a traditional path-based routing approach, but sometimes, you may need to go beyond that and incorporate subdomains into your application. Subdomains can be useful for creating separate sections or microservices within your website, each with its unique behavior and content.

Setting Up Subdomains

To implement subdomains in Nuxt 3, we start by defining our routing configuration in app/router.options.ts:

import type { RouterConfig } from '@nuxt/schema'

export default <RouterConfig> {
    routes: (_routes) => {
        let routesDirectory: any = null;
        const { ssrContext } = useNuxtApp();

        // Check for subdomain in the URL on the server
        if (process.server && ssrContext && ssrContext.event.node.req) {
            const req = ssrContext.event.node.req
            const subdomain = req.headers.host?.split('.')[0]
            if (subdomain !== 'www' && subdomain !== 'localhost' && subdomain !== 'localhost:3000') {
                routesDirectory = 'auth'
            } else {
                routesDirectory = 'default'
            }
        }

        // Check for subdomain in the URL on the client
        if (process.client && window.location.hostname) {
            const subdomain = window.location.hostname.split('.')[0]
            if (subdomain !== 'www' && subdomain !== 'localhost'  && subdomain !== 'localhost:3000') {
                routesDirectory = 'auth'
            } else {
                routesDirectory = 'default'
            }
        }

        // Function to clear a directory not in use
        function isUnderDirectory (route: any, directory: any) {
            const path = route.path
            return path === '/' + directory || path.startsWith('/' + directory + '/')
        }

        let newRoutes = _routes

        if (routesDirectory) {
            // Filter routes
            newRoutes = _routes.filter((route: any) => {
                const toRemove = routesDirectory === 'auth' ? 'default' : 'auth'
                return !isUnderDirectory(route, toRemove)
            }).map((route: any) => {
                if (isUnderDirectory(route, 'auth')) {
                    return {
                        ...route,
                        path: route.path.replace('/auth', '/'),
                        name: route.name || 'index'
                    }
                } else if (isUnderDirectory(route, 'default')) {
                    return {
                        ...route,
                        path: route.path.substr(routesDirectory.length + 1) || '/',
                        name: route.name || 'index'
                    }
                }
            })
            return newRoutes
        }
    }
}

💡 Note: In this setup, we create two folders: auth and default. The auth folder corresponds to the auth.domain.com subdomain, while the default folder represents the main domain, domain.com.

Creating Subdomain Pages

Once the routing is configured, we create the necessary pages for each subdomain:

1. Create pages/auth/index.vue to handle the content for the auth subdomain
2. Create pages/default/index.vue for the main domain

These pages will be responsible for rendering the content specific to their respective subdomains.

Benefits of Subdomains

Subdomains offer several advantages for your application:

1. Isolation 🔒

• Clean separation of concerns
• Independent functionality for different sections
• Enhanced security through isolation

2. Scalability 📈

• Independent scaling of different sections
• Improved resource management
• Better performance optimization

3. Customization 🎨

• Unique design per subdomain
• Tailored functionality
• Specialized content delivery

Conclusion

Implementing subdomains in Nuxt 3 provides enhanced routing flexibility and the ability to create separate sections within your web application. By following these steps, you can harness the power of subdomains to create a more dynamic and organized website.

⚡ Pro Tip: Always consider your application’s architecture and user experience when implementing subdomains. They should serve a clear purpose and enhance the overall functionality of your website.

With Nuxt 3’s robust routing capabilities, the possibilities are endless, and subdomains are just one of the many tools at your disposal to craft exceptional web experiences. Start exploring subdomains today and unlock a new dimension of routing in your Nuxt 3 projects!

Happy coding! 🚀