Implement subdomains with VueJS.

Tipically any VueJS project has a "router.js" file, here we need to set a subdomain route or routes:

router.js:

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './views/Home'
import CustomerHome from './views/CustomerHome'

Vue.use(VueRouter)

export default new VueRouter({
    mode: 'history',
    routes: [

        { 
            path: '/app', 
            name: 'Home', 
            component: Home 
        },

        { 
            path: '/*/app', 
            name: 'foundationHome', 
            component: CustomerHome 
        },
    ]
})

Here we are setting two routes, the first "/app" goes to Home view, the second is the one that is useful for set subdomains, this route can be literally "anything/app", this "anything" could be any string it's a wildcard.

Create a link you can set:

<router-link to="anything/app">Go to</router-link>

But if I need to catch the wildcard value?

In any component create a computed property and add the next function:

computed: {
    wildcard() {
       return this.$route.params.pathMatch
    },
},

Push a route:

With an event you can create the same functionality as a route-link.

You cannot use a named route, because a wildcard is not a param so you cannot add wildcard as property in the route object, to solve this you can build a string for some route endpoint as you need it:

methods: {
    goHome() {
        return this.$router.push(`/${this.wildcard}/app`)
    }
},

So now you can reference the value anywhere in your component with "this.wildcard", this could be particularly useful when you need to build a request by some tenant.

Thats all, thanks for reading.

Comments

[KP]

@arielmejiadev is there a way to implement subdomains in a laravel + nuxt.js stack? Please create a short follow up post :)

[Ariel Mejia]

Well I suppose Nuxt has a route.js file to register and handle routes, so you can test a route like this:

export default new VueRouter({
    ... 
    routes: [
       { path: '/*/app', name: 'userAppDashboard', component: App },
    ]
})

You only need to identify where the VueRouter instance is export

[KP]

Thanks, the route.js file isn’t exposed in nuxt.js, however. There also is an nginx config to figure out here..

[Ariel Mejia]

I will take a look at Nuxt and probably this week I could have a solution, thanks for read the post :)

[KP]

thank you, will wait :)

[juretopolak]

I'm also interested in the solution :)

[Ariel Mejia]

Hi, I research a about this in NuxtJS but there is no simple solution, in addition would need to add some config to the server nginx or apache to make it work, my best recommendation is to work with VueCLI and add the config that you need in the server or use a server side language to make it handle the subdomains for you, in Rails or Laravel this is pretty simple.

:( sorry if its not very helpful, but this is a little bit complicated, but if you find a way to handle this, please share your thoughts.

[juretopolak]

I'm researching the options to build a kind of multi-tenant app, where each user would have own subdomain.
From DNS standpoint it's easy to create a wildcard record that points all subdomains to the same ip address. From the server standpoint, I also have an idea on how to point all traffic to subdomains in the same directory where would be nuxt app.
I was hoping that nuxt router has some kind of support, to get domain and its parts from this.$route but it has not.
So I guess the only solution would be to extract parts of a domain with plain JS like this:
const parts = window.location.host.split('.') and get subdomain value from the array.
I just don't know yet what would be the best way to make this value available globally. Maybe to store it in Vuex?

[Ariel Mejia]

In docs there is no support for any like this in the routes, I dont understand how can it suppose to work because even if you get the right config on the server I do not understand how to apply all the changes and it what layer of the app it would work, for me its easy to understand how it works on server side languages, sorry