How to implement subdomain in Vue3?

Question

I have a website where I can host different shop profiles and currently I'm generating the route with the help of shop name's slug, but instead of https://example.com/shop/abc-shop I wanted the route to be https://abc-shop.example.com/ and upon looking up on the internet I can't find a way to do it with Vue3 router. Please suggest some approaches.

I guess you actually have a separate thing in the sub-domain. In that case, you can just use a regular link — Liel Fridman
– Liel Fridman, Commented Nov 18, 2021 at 17:01
I have the shop profile in subdomain, that's just a normal page for the shop. How can I seperate that so that I get routed to the subdomain by default? — Sahil Silare
– Sahil Silare, Commented Nov 18, 2021 at 17:04
It's unclear how you expect it to work. A different domain cannot be a part of SPA and so how it's related to Vue router. There has to be a redirect. You can do this with location. — Estus Flask
– Estus Flask, Commented Nov 18, 2021 at 17:21
Now, I have a shop profile which can be viewed at https://example.com/shop/abc-shop but I want to view that on https://abc-shop.example.com/ — Sahil Silare
– Sahil Silare, Commented Nov 18, 2021 at 17:29
I mean how you expect it to work from tech point of view. It's a different site. It's the same as if you would like to make one of pages to be google.com. Redirect to it with window.location. It's not a part of the router. — Estus Flask
– Estus Flask, Commented Nov 18, 2021 at 17:32

Fy- · Accepted Answer · 2022-01-17 21:38:01Z

2

Old, but I do something like this with a similar need. (blogs)

const router = createRouter({
    history: createWebHistory(),
    routes,
})

router.beforeEach((to, from, next) => {
    let subdomain = window.location.host.split('.')[0]
    console.log(subdomain)
    if (subdomain != 'www' && subdomain != 'localhost:3000') {
        to.params['subdomain']= subdomain
    }
    next()
})

then you can handle it in your template , for me I use a custom component called blogRouterView that contains specific paths and then parses this.$route to know what component to include using async components. (<component :is="currentURLComponent"></component>)

edited Jan 17, 2022 at 21:38

answered Jan 17, 2022 at 20:43

Fy-

914 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mises · Accepted Answer · 2022-01-17 22:03:13Z

0

Like Estus Flask wrote in comments subdomain is a completly diferent server. Browser treat it like it is separate www page. You need to write for this subdomain another vue project and in root domain redirect to this subdomain. Or you can prepere sub domain to be able to use in for example <iframe> tag.

answered Jan 17, 2022 at 22:03

Mises

4,6332 gold badges24 silver badges37 bronze badges

Collectives™ on Stack Overflow

How to implement subdomain in Vue3?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related