https://github.com/andrehrferreira/cmmv-vue

CMMV module for generating RPC functions for Vue2 and Vue3
https://github.com/andrehrferreira/cmmv-vue

cmmv composable mixins nuxt rpc vue2 vue3

Last synced: 15 days ago
JSON representation

CMMV module for generating RPC functions for Vue2 and Vue3

• Host: GitHub
• URL: https://github.com/andrehrferreira/cmmv-vue
• Owner: cmmvio
• License: mit
• Created: 2024-12-10T06:44:14.000Z (2 months ago)
• Default Branch: main
• Last Pushed: 2025-01-24T02:09:57.000Z (28 days ago)
• Last Synced: 2025-01-24T03:18:47.875Z (28 days ago)
• Topics: cmmv, composable, mixins, nuxt, rpc, vue2, vue3
• Language: JavaScript
• Homepage:
• Size: 26.4 KB
• Stars: 0
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        


  



Contract-Model-Model-View (CMMV) 
 Building scalable and modular applications using contracts.



    

    





  Documentation •

  Report Issue



## Description

The `@cmmv/vue` module provides seamless integration between CMMV and Vue applications, offering a transpiler to generate **mixins for Vue 2** and **composables for Vue 3** based on CMMV contracts. This module enables efficient RPC function usage and provides transparent reading and writing of data using Protobuf contracts.

With `@cmmv/vue`, you can quickly connect your Vue applications to the CMMV framework, allowing full utilization of RPC functionalities with minimal setup.

## Installation

Install the ``@cmmv/vue`` package via npm:

```bash

$ pnpm add @cmmv/vue

```

## Features

* **RPC Integration:** Easily connect Vue applications with CMMV RPC functions.

* **Automatic Protobuf Parsing:** Provides transparent handling of Protobuf contracts for reading and writing data.

* **Mixins for Vue 2:** Automatically generated mixins simplify RPC integration.

* **Composables for Vue 3:** Leverage Vue's Composition API with generated composables for better reactivity and code organization.

* **Dynamic Contract Updates:** Automatically updates when contracts are modified on the server side.

## Quick Start

### Vue 2

For Vue 2, the module generates mixins for handling RPC methods. Here's an example:

```javascript

import Vue from 'vue';

import RPCMixins from '/assets/rpc-mixins.js';

// Register RPC Mixins globally

Vue.mixin(RPCMixins);

new Vue({

  el: '#app',

  data: {

    message: '',

  },

  async created() {

    // Example RPC call

    this.message = await this.rpc.getMessage({ id: 1 });

  },

});

```

### Vue 3

For Vue 3, the module generates composables for streamlined integration with the Composition API:

```javascript

import { createApp } from 'vue';

import { useRPC } from '/assets/rpc-composables.js';

const app = createApp({

  setup() {

    const rpc = useRPC();

    const message = ref('');

    onMounted(async () => {

      message.value = await rpc.getMessage({ id: 1 });

    });

    return { message };

  },

});

app.mount('#app');

```

### Nuxt

In the plugins/ directory, create a file named rpc.client.ts to register the RPC composables globally.

```javascript

import { defineNuxtPlugin } from '#app';

import { useRPC } from '/assets/rpc-composables.js';

export default defineNuxtPlugin(() => {

    return {

        provide: {

            rpc: useRPC(),

        },

    };

});

```

**Example Component:** ``pages/index.vue``

```vue

  


    
Tasks

    


      


        {{ task.label }} - {{ task.checked ? 'Completed' : 'Pending' }}

      

    

    Load Tasks

  


import { ref } from 'vue';

const tasks = ref([]);

const { $rpc } = useNuxtApp();

const fetchTasks = async () => {

  try {

    tasks.value = await $rpc.GetTasksList();

  } catch (error) {

    console.error('Error fetching tasks:', error);

  }

};

```