A Simple Nuxt Module to Manage Multiple Subdomains with Just a Single Nuxtjs Project

A Simple Nuxt Module to Manage Multiple Subdomains with Just a Single Nuxtjs Project

A simple module to manage multiple subdomains with just one project . A simple nuxt module to manage multiple subdomains with just a single nuxtJS project

Welcome to k-domains 👋

k-domains

🏠 Homepage

✨ Demo

portfolio & blog

What is this ?? 🤔

A simple nuxt module to manage multiple subdomains with just a single nuxtJS project

What problem does this solves??

     Ever wondered how will you setup 3 sites of your own where you have same layouts & few shared components like feedback forms and so?? The simple way to do is copy, paste the same in all those 3 projects... isn't it?? But when you have to make changes, so you will require to copy the same thing in all the other projects... This is not the right way... ❌ ❌ ❌      k-domains let's you manage any number of subdomains with ease and that too without even need to create separate project for each subdomain (site). All your layouts, shared components and the code for these sites will live in one project only.      All you have to is to just add k-domains and configure it in your nuxt.config.js file as shown in the #setup.

Install

yarn add k-domains # or npm i k-domains

Setup

  1. Add k-domains to your project
yarn add k-domains # or npm i k-domains
  1. Add @nuxtjs/router to your project
yarn add @nuxtjs/router
  1. Configure k-domains and @nuxtjs/router to the buildModules section of nuxt.config.js as follows:
  export default {
    buildModules: [
      [ "k-domains", {
          subDomains: [ ], // List of directories to hold te pages for your subdomains
          rootDomain: "root-domain" //  directory to hold the pages for root domain  
      }
      ],
      ["@nuxtjs/router",{
          keepDefaultRouter: true // this line is mandatory...
      }
      ]
    ]
}
  1. Example
  export default {
    buildModules: [
      [ "k-domains", {
          subDomains: ["blog", "projects", "anotherSubDomain" ], // List of directories to hold te pages for your subdomains
          rootDomain: "main-domain" //  directory to hold the pages for root domain  
      }
      ],
      ["@nuxtjs/router",{
          keepDefaultRouter: true // this line is mandatory...
      }
      ]
    ]
}

and the tree for the pages should look like this:

|   
|─pages
|   ├───blog
|   ├───projects
|   ├───main-domain
|   └───anotherSubDomain
  1. That's it, now create pages in respective directories and it'll be mapped to that subdomains.

Options

subDomains

  • Type: Array<String> Add your subdomains here

rootDomain

  • Type: String directory name for the pages of root-domain

Author

👤 krypton < [email protected] >

🤝 Contributing

Contributions, issues and feature requests are welcome! Feel free to check issues page.

Show your support

Consider giving a ⭐️ if this project helped you!

This README was generated with ❤️ by readme-md-generator

Download Details:

Author: madhusudanbabar

Source Code: https://github.com/madhusudanbabar/k-domains

vue vuejs nuxt javascript nuxtjs

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework. Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

How to add Authentication to Nuxt.JS and Vue.JS

This Vue.JS Tutorial shows how to add Authentication and Authorization to your NuxtJS App and make it work with SSR

Snippets And Boiler Plates Built With Nuxtjs And Nuxt/content

Documentation with snippets and boiler plates, built with NuxtJS and nuxt/content. Markdown ❤️ for ever.

How to build enterprise Vue.js applications with Nuxt?

Learn How to build enterprise Vue.js applications with Nuxt: Nuxt is a progressive framework based on Vue.js to create modern web applications. It is based on Vue.js official libraries (vue, vue-router and vuex) and powerful development tools (webpack, Babel and PostCSS). Nuxt goal is to make web development powerful and performant with a great developer experience in mind.

Modern JavaScript date utility library - date-fns for Nuxt.js

date-fns-module Modern JavaScript date utility library - date-fns for Nuxt.js