Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fidden/nuxt-mvvm
Intuitive, type safe and flexible MVVM implementation for nuxt based applications
https://github.com/fidden/nuxt-mvvm
dependency-injection di mvvm mvvm-architecture nuxt oop solid vue
Last synced: 3 months ago
JSON representation
Intuitive, type safe and flexible MVVM implementation for nuxt based applications
- Host: GitHub
- URL: https://github.com/fidden/nuxt-mvvm
- Owner: Fidden
- License: mit
- Created: 2023-07-04T07:45:53.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-01-01T22:48:16.000Z (about 1 year ago)
- Last Synced: 2024-11-06T03:07:13.218Z (3 months ago)
- Topics: dependency-injection, di, mvvm, mvvm-architecture, nuxt, oop, solid, vue
- Language: TypeScript
- Homepage: https://codesandbox.io/p/github/Fidden/nuxt-mvvm/master
- Size: 632 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
nuxt-mvvm
⚡️ MVVM implementation for nuxt applications
> Intuitive, type safe and flexible MVVM implementation for nuxt based applications
## Features
- ⛰️ Nuxt3 ready
- ⚙️ SSR support
- 💉 Dependency injection
- 📦 Extremely light
## Setup
Add as dependency
```shell
pnpm add nuxt-mvvm && pnpm add tsyringe -D
```
```ts
import {defineNuxtConfig} from 'nuxt'
export default defineNuxtConfig({
modules: ['nuxt-mvvm']
})
```
## Usage
### 1. Simple usage
Create view-model
```ts
@ViewModel()
class MyViewModel extends BaseViewModel {
constructor() {
super();
this.counter = 0;
}
public increment() {
this.counter++;
}
}
```
And just use it
```vue
count: {{vm.counter}}
import {useVm} from '#imports';
const vm = useVm(MyViewModel);
```
### 2. Usage with services
Create service
```ts
class CounterService {
constructor() {
this.value = 0;
}
public increment() {
this.value++;
}
}
```
Inject service
```ts
@ViewModel()
class MyViewModel extends BaseViewModel {
constructor(
@injectDep(CounterService) public readonly counter: CounterService
) {
super();
}
}
```
Use it with service
```vue
count: {{ vm.counter.value }}
import {useVm} from '#imports';
const vm = useVm(MyViewModel);
```
### 3. Control lifecycle
You can specify life cycle hook via `IMountable` `ISetupable`, `IUnmountable` interfaces or just use union
interface `ILifeCycle` that contains all possible life cycle hooks.
```ts
@ViewModel()
class MyViewModel extends BaseViewModel implements IMountable, ISetupable, IUnmountable /* or implements ILifeCycle */ {
constructor() {
super();
}
public onMount() {
// calls on view mounting
}
public onSetup() {
// calls on view setup
}
public onUnmount() {
// calls on view unmounting
}
}
```
### 4. Routing
The `BaseViewModel` encompasses `router` and `route` variables, which are equivalents of `useRouter` and `useRoute`.
```ts
@ViewModel()
class MyViewModel extends BaseViewModel {
constructor() {
super();
}
public redirect() {
this.router.push('/');
}
public get currentRouteFullPath() {
return this.route.fullPath;
}
}
```
Life cycle interfaces:
- `IMountable`
- `IBeforeMountable`
- `ISetupable`
- `IUnmountable`
- `IBeforeUnmountable`
- `ICaptureError`
- `IUpdatable`
- `IRenderTrackable`
- `IRenderTriggerable`
- `IDeactivatable`
- `IActivatable`
- `IServicePrefetchable`
Router interfaces:
- `IRouterable`
### Decorators
1. `ViewModel` - Labels a class as a view-model. Apply this decorator when the class represent a screen or a component.
2. `injectDep` - Injects a dependency into a view-model.
3. ~~`ScreenVm` - Signifies that the class is a screen view-model.~~ (deprecated)
4. ~~`ComponentVm` - Identifies a class as a component view-model.~~ (deprecated)
### Reusable Composition Functions
1. `useVm` - Function to generate view-model instance
2. `useChildVm` - Function to utilize an instance of previously created view-model
### Establishment of a base view-model
```ts
/**
* Every view-model must inherit from the BaseViewModel class and be decorated with the @ViewModel, or @ScreenVm, or @ComponentVm decorator.
*/
@ViewModel()
class ViewModel extends BaseViewModel {
constructor() {
super();
}
}
```