{"id":18630807,"url":"https://github.com/fidden/nuxt-mvvm","last_synced_at":"2025-04-11T06:31:22.312Z","repository":{"id":178904322,"uuid":"662026610","full_name":"Fidden/nuxt-mvvm","owner":"Fidden","description":"Intuitive, type safe and flexible MVVM implementation for nuxt based applications","archived":false,"fork":false,"pushed_at":"2024-01-01T22:48:16.000Z","size":647,"stargazers_count":4,"open_issues_count":5,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-11-06T03:07:13.218Z","etag":null,"topics":["dependency-injection","di","mvvm","mvvm-architecture","nuxt","oop","solid","vue"],"latest_commit_sha":null,"homepage":"https://codesandbox.io/p/github/Fidden/nuxt-mvvm/master","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Fidden.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-07-04T07:45:53.000Z","updated_at":"2024-09-09T01:54:13.000Z","dependencies_parsed_at":"2023-10-24T12:34:10.440Z","dependency_job_id":null,"html_url":"https://github.com/Fidden/nuxt-mvvm","commit_stats":null,"previous_names":["fidden/nuxt-mvvm-di","fidden/nuxt-mvvm"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Fidden%2Fnuxt-mvvm","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Fidden%2Fnuxt-mvvm/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Fidden%2Fnuxt-mvvm/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Fidden%2Fnuxt-mvvm/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Fidden","download_url":"https://codeload.github.com/Fidden/nuxt-mvvm/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223460680,"owners_count":17148759,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dependency-injection","di","mvvm","mvvm-architecture","nuxt","oop","solid","vue"],"created_at":"2024-11-07T05:04:18.270Z","updated_at":"2024-11-07T05:04:30.281Z","avatar_url":"https://github.com/Fidden.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003enuxt-mvvm\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e⚡️ MVVM implementation for nuxt applications\u003c/p\u003e\n\n\u003e Intuitive, type safe and flexible MVVM implementation for nuxt based applications\n\n## Features\n\n- ⛰️ Nuxt3 ready\n- ⚙️ SSR support\n- 💉 Dependency injection\n- 📦 Extremely light\n\n## Setup\n\nAdd as dependency\n\n```shell\npnpm add nuxt-mvvm \u0026\u0026 pnpm add tsyringe -D\n```\n\n```ts\nimport {defineNuxtConfig} from 'nuxt'\n\n\nexport default defineNuxtConfig({\n    modules: ['nuxt-mvvm']\n})\n```\n\n## Usage\n\n### 1. Simple usage\n\nCreate view-model\n\n```ts\n@ViewModel()\nclass MyViewModel extends BaseViewModel {\n    constructor() {\n        super();\n        this.counter = 0;\n    }\n\n    public increment() {\n        this.counter++;\n    }\n}\n```\n\nAnd just use it\n\n```vue\n\n\u003ctemplate\u003e\n\t\u003cbutton @click=\"vm.increment()\"\u003e\n\t\tcount: {{vm.counter}}\n\t\u003c/button\u003e\n\u003c/template\u003e\n\n\u003cscript setup lang=\"ts\"\u003e\n\timport {useVm} from '#imports';\n\n\n\tconst vm = useVm(MyViewModel);\n\u003c/script\u003e\n```\n\n### 2. Usage with services\n\nCreate service\n\n```ts\nclass CounterService {\n    constructor() {\n        this.value = 0;\n    }\n\n    public increment() {\n        this.value++;\n    }\n}\n```\n\nInject service\n\n```ts\n@ViewModel()\nclass MyViewModel extends BaseViewModel {\n    constructor(\n        @injectDep(CounterService) public readonly counter: CounterService\n    ) {\n        super();\n    }\n}\n```\n\nUse it with service\n\n```vue\n\n\u003ctemplate\u003e\n\t\u003cbutton @click=\"vm.counter.increment()\"\u003e\n\t\tcount: {{ vm.counter.value }}\n\t\u003c/button\u003e\n\u003c/template\u003e\n\n\u003cscript setup lang=\"ts\"\u003e\n\timport {useVm} from '#imports';\n\n\n\tconst vm = useVm(MyViewModel);\n\u003c/script\u003e\n```\n\n### 3. Control lifecycle\n\nYou can specify life cycle hook via `IMountable` `ISetupable`, `IUnmountable` interfaces or just use union\ninterface `ILifeCycle` that contains all possible life cycle hooks.\n\n```ts\n@ViewModel()\nclass MyViewModel extends BaseViewModel implements IMountable, ISetupable, IUnmountable /* or implements ILifeCycle */ {\n    constructor() {\n        super();\n    }\n\n    public onMount() {\n        // calls on view mounting\n    }\n\n    public onSetup() {\n        // calls on view setup\n    }\n\n    public onUnmount() {\n        // calls on view unmounting\n    }\n}\n```\n\n### 4. Routing\nThe `BaseViewModel` encompasses `router` and `route` variables, which are equivalents of `useRouter` and `useRoute`.\n```ts\n@ViewModel()\nclass MyViewModel extends BaseViewModel {\n    constructor() {\n        super();\n    }\n\n    public redirect() {\n        this.router.push('/');\n    }\n    \n    public get currentRouteFullPath() {\n        return this.route.fullPath;\n    }\n}\n```\n\nLife cycle interfaces:\n\n- `IMountable`\n- `IBeforeMountable`\n- `ISetupable`\n- `IUnmountable`\n- `IBeforeUnmountable`\n- `ICaptureError`\n- `IUpdatable`\n- `IRenderTrackable`\n- `IRenderTriggerable`\n- `IDeactivatable`\n- `IActivatable`\n- `IServicePrefetchable`\n\nRouter interfaces:\n\n- `IRouterable`\n\n### Decorators\n\n1. `ViewModel` - Labels a class as a view-model. Apply this decorator when the class represent a screen or a component.\n2. `injectDep` - Injects a dependency into a view-model.\n3. ~~`ScreenVm` - Signifies that the class is a screen view-model.~~ (deprecated)\n4. ~~`ComponentVm` - Identifies a class as a component view-model.~~ (deprecated)\n\n### Reusable Composition Functions\n\n1. `useVm` - Function to generate view-model instance\n2. `useChildVm` - Function to utilize an instance of previously created view-model\n\n### Establishment of a base view-model\n\n```ts\n/**\n * Every view-model must inherit from the BaseViewModel class and be decorated with the @ViewModel, or @ScreenVm, or @ComponentVm decorator.\n */\n@ViewModel()\nclass ViewModel extends BaseViewModel {\n    constructor() {\n        super();\n    }\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffidden%2Fnuxt-mvvm","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffidden%2Fnuxt-mvvm","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffidden%2Fnuxt-mvvm/lists"}