When registering my Vue.js components, I follow this pattern:
In the index.js file of a separate reusable npm and webpack project called myComponents:
import MyButtons from './src/components/my-buttons.vue'
import MyInput from './src/components/my-inputs.vue'
export default {
install(Vue, options) {
Vue.component("my-button", MyButtons);
Vue.component("my-input", MyInput);
}
};
I then use these components in another project by linking them with npm:
import Vue from 'vue'
import App from './vue/App.vue'
import MyComponents from 'myComponents'
Vue.use(MyComponents, {
theme: 'SomeTheme',
color: 'SomeColor'
});
new Vue({el: '#app', render: h => h(App)});
My goal now is to find a way to pass options to the registered components within the install()
function and store them. This will enable me to customize the color and theme for each instance of these components based on predefined styles and colors.