Within my application, I have a variety of components that are either generic or specific to certain brands. For example, I have two brand-specific components named Product_brand_A.vue and Product_brand_B.vue, both of which I want to display in a list format. The parent component, ProductList.vue, is designed to be generic and used for all brands.
What strategies can I employ within the ProductList.vue component to determine which child component to utilize?
// ProductList.vue (generic)
import Product from 'Product.vue' // simply importing won't suffice
var ProductList = {
components: {
Product
},
...
}
I'm looking for a solution that doesn't involve importing both child components and making a decision at runtime; rather, I need a solution that is determined during the build process.