CODEWITHSUNDEEP
vue.jsarchitecturefrontendviteweb-frontend
Hamzah Hameed
Hamzah Hameed

Reputation: 1

How to Handle Multiple Template Layouts Based on Domain in a Vue (Vite) App?

I’m working on a Vue app (using Vite) that has three different template layouts, and the layout should be determined by the domain the user visits.

Requirements: If a user visits test1.com, they should see Template 1. If a user visits test2.com, they should see Template 2. If a user visits test3.com, they should see Template 3. Most of the components and logic are shared, but each template has some unique styles and components. The app does not use SSR. Users cannot switch templates within the app (the template is fixed per domain). The project has a shared folder with common store, router, and shared components. What I’ve Tried: I attempted to fetch the template ID and pass it into vite.config.js, but I think the issue is that this approach needs to be handled at build time or runtime.

My Question: What is the best way to set up this kind of multi-template structure without making users download unnecessary components? Should I be handling this at build time (e.g., different builds for each template) or at runtime (e.g., dynamically loading only relevant files)? What’s the best way to configure Vite to handle this cleanly? Any guidance or best practices would be appreciated!

Upvotes: 0

Views: 22

Answers (1)

yuanyxh
yuanyxh

Reputation: 1

Are you familiar with vue-router? It allows you to map routes to components, supports nested routing where you can create multiple top-level routes to establish base layouts. The documentation can be found here: vue-router

Upvotes: -1

Related Questions