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, they should see Template 1.
• If a user visits test2, they should see Template 2.
• If a user visits test3, 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!

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, they should see Template 1.
• If a user visits test2, they should see Template 2.
• If a user visits test3, 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!

• vue.js
• architecture
• vite

Share Improve this question Follow edited Mar 21 at 7:04 Kamran Khalid 1 asked Mar 3 at 4:41 Hamzah HameedHamzah Hameed 1 1

• 1 The question is too broad for SO at this point. It's unknown what "layout" is in your case. Is it one component or what? This can be achieved with any form of dependency injection. You can pass "layout" through App component props or slots, through provide/inject, or through appponent(). On Vite level you can remap imports with "alias" config – Estus Flask Commented Mar 3 at 9:09

Add a comment  | 

1 Answer 1

Sorted by: Reset to default -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