Model-View-Presenter toolkit for Vue 3

The 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.

$3

For detailed documentation, including API references, tutorials, and more, please see the documentation site.

You can find the package on npm.

$3

To begin with Model-Vue-Presenter, simply install the library:

``bash
$ npm install model-vue-presenter


or


yarn add model-vue-presenter
`

$3

#### Clean vue component, implementing a presenter:

`vue



`

#### 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()
})
},
}
})
``