Model-View-Presenter toolkit for Vue 3 apps
npm install model-vue-presenterThe toolkit enables you to easily leverage the Model-View-Presenter design pattern in Vue 3 apps.
Separate logic from the Vue components and reduce code coupling.
For detailed documentation, including API references, tutorials, and more, please see the documentation site.
You can find the package on npm.
To begin with Model-Vue-Presenter, simply install the library:
``bash`
$ npm install model-vue-presenteror
yarn add model-vue-presenter
#### Clean vue component, implementing a presenter:
`vue
{{ viewModel.productPageHeading }}
{{ product.name }}
{{ product.price }}
`
#### Simple presenter file:
`ts
import { reactive, computed } from "vue"
import { presenterFactory } from "model-vue-presenter"
import { useAvailableProducts, fetchAvailableProducts } from '../'
export const useProductsPagePresenter = presenterFactory(() => {
const products = useAvailableProducts()
const skeletonLoader = reactive({
isShown: false,
show() { this.isShown = true },
hide() { this.isShown = false },
})
return {
viewModel: computed(() => ({
isSkeletonLoaderShown: skeletonLoader.isShown,
productPageHeading: 'Available products',
products: products.value
})),
onCreated() {
skeletonLoader.show()
fetchAvailableProducts().finally(() => {
skeletonLoader.hide()
})
},
}
})
``