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.
npm install piral-vueVerified import paths — ran on the pinned version, not inferred.
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.
For Vue 3 projects, use the dedicated `piral-vue3` package. Ensure your Pilet's `package.json` specifies `vue@^2.x` and that your Piral instance is consistently configured for Vue 2.
Utilize Piral's built-in event bus (`app.on(...)`, `app.emit(...)`) or Piral's global state management (`app.readState(...)`, `app.updateState(...)`) for communication and state sharing between pilets. Each Vue Pilet should manage its own local Vuex store if needed.
Employ robust CSS methodologies like BEM within your Vue components, use CSS Modules, or leverage Piral's built-in CSS isolation features (if available). Regularly review generated CSS to prevent unintended style bleed, and consider using shadow DOM for stricter encapsulation.
Verify that `vue@^2.x` is correctly installed in your pilet's `package.json` and that your component definitions strictly adhere to the Vue 2 API. If you intend to use Vue 3, switch to `piral-vue3` instead of `piral-vue`.
Ensure your Vue 2 component definition includes either a `template` property (as a string) or a `render` function. Double-check for any syntax errors in your component's options object or if a build step (like a Vue loader) failed to process the component correctly.