{"library":"piral-vue","title":"Piral Vue 2 Plugin","description":"Piral-vue is a plugin designed for integrating Vue 2 components within a Piral microfrontend application. It acts as a converter, allowing developers to seamlessly register and render existing or new Vue 2 components as pilets (microfrontends) or parts of pilets. The package is an integral part of the larger Piral ecosystem, which focuses on building scalable and maintainable web portals using a microfrontend architecture, facilitating the combination of different frontend frameworks. As of version 1.10.3, it continues to receive regular updates, typically with minor point releases addressing bug fixes, dependency updates, and improvements within the broader Piral framework, ensuring compatibility and stability within the Piral ecosystem. Its key differentiator is its explicit support for Vue 2, enabling the reuse of established Vue 2 codebases within a modern microfrontend shell. This provides a clear migration path or coexistence strategy for organizations with significant investments in Vue 2 applications, allowing them to incrementally modernize or integrate without forcing an immediate, large-scale upgrade to Vue 3. The plugin handles the necessary lifecycle management and integration points to make Vue 2 components behave as native Piral extensions or pages.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install piral-vue"],"cli":null},"imports":["import { createVueApi } from 'piral-vue';","import type { PiletVueApi } from 'piral-vue';","import type { VueComponent } from 'piral-vue';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import type { PiletApi } from 'piral';\nimport { defineComponent } from 'vue'; // Ensure vue@2 is a dependency in your pilet\n\n// Extend PiletApi with piral-vue specific functions provided by the Piral instance.\n// This assumes 'piral-vue' has been configured in the Piral instance's createInstance call.\ninterface MyPiletApi extends PiletApi {\n  fromVue(component: any): any; // The actual type is VueComponentConverter<VueComponent>\n}\n\n// Define a simple Vue 2 component\nconst MyVueComponent = defineComponent({\n  name: 'MyVueComponent',\n  props: {\n    message: {\n      type: String,\n      default: 'Hello from Vue 2 Pilet!',\n    },\n  },\n  template: `\n    <div style=\"padding: 10px; border: 1px solid #42b983; margin: 10px; border-radius: 5px;\">\n      <h3>{{ message }}</h3>\n      <p>This is a Vue 2 component served by a Pilet.</p>\n      <button @click=\"increment\">Count: {{ count }}</button>\n    </div>\n  `,\n  data() {\n    return {\n      count: 0,\n    };\n  },\n  methods: {\n    increment() {\n      this.count++;\n    },\n  },\n});\n\n/**\n * The setup function for the Pilet.\n * It registers a Vue component as an extension and a page within the Piral application.\n */\nexport function setup(app: MyPiletApi) {\n  // Register the Vue component as an extension.\n  // It can be embedded anywhere in the Piral app using <Extension name=\"vue-pilet-card\" />.\n  app.registerExtension('vue-pilet-card', app.fromVue(MyVueComponent));\n\n  // Register the Vue component as a full page, accessible via a route.\n  app.registerPage('/vue-pilet-page', app.fromVue(MyVueComponent));\n\n  console.log('Vue 2 Pilet: MyVueComponent registered as extension \"vue-pilet-card\" and page \"/vue-pilet-page\".');\n}\n","lang":"typescript","description":"Demonstrates how a Pilet uses `piral-vue` to define and register a Vue 2 component as both a Piral extension and a full page. This quickstart assumes `piral-vue` has been configured in the main Piral instance.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}