I'm exploring ways to define some default props and functions in my Vue instance that I can use across all of my components. How do I achieve this? I attempted to pass the props, but since they are read-only it didn't work as expected.
Am I on the right track with this approach, or should I consider another method?
// vue.js
import { createApp } from 'vue';
import Page from './vue-instances/Page';
const Vue = createApp({
data() {
return {
loading: false // default prop
};
},
components: {
Page
}
});
Vue.mount('#vue-app');
// Page.vue
export default {
props: { loading: Boolean },
data() {
return {
title: 'New Page',
};
},
mounted: function () {
setTimeout(() => {
this.loading = true; // Reuse inherited props
}, 1000);
}
};