Vue.js application architecture, focusing on reusability and scalability

Question

I'm working on an Application which is already build for one country. Now it is required to scale it to multiple countries (20+) with minor changes in each component. How to implement for making code reusable and scalable, ways I thought:

• New Repo (Independent releases, no code reuse but easily scalable)
• New Folder for each country, new files only if changes are there (Independent, Little repeated code, Looks scalable )
• Using v-if on divs to decide to show or not (Dependent releases, Highly reusable, but difficult scalability making code dirty)

App structure/Code: There is a form whose fields and validations will change based on country. Plus few banners whose banner layout is based on country.

Would like to know how we can architect such Vue.js Application ?

Answer 1

很难看到所有代码，但是如果您已经在使用i18n更改语言字符串并且所做的更改确实很小，我认为v-if是您的最佳选择。

Answer 2

Instead of having v-ifs, I'd delegate this logic to a custom component:

Instead of:

<h2>Country Specific</h2>
<v-if="country=='A'>
<v-if="country=='B'>
<v-if="country=='C'>
etc...

Do this:

<h2>Country Specific</h2>
<custom-module country="currentCountry"/>

and group all these "per country" modules under a specific folder separate from your "global/shared" system.