piral-vue-3 is a plugin designed to seamlessly integrate Vue 3 components within a Piral microfrontend application. It enables developers to build 'pilets' (microfrontends) using Vue 3, which can then be dynamically loaded and rendered by a Piral instance (the 'shell' application). The current stable version is 1.10.3, with minor point releases occurring frequently, typically addressing dependency updates, bug fixes, and improvements across the Piral ecosystem. Key differentiators include its tight integration with the Piral Pilet API, allowing Vue 3 components to leverage the Piral communication layer and shared services, and its focus on enabling a multi-framework approach within a single microfrontend host. It abstracts away the complexities of mounting and unmounting Vue 3 applications within the Piral lifecycle, providing a robust solution for incorporating Vue 3 into larger, heterogeneous microfrontend architectures.
npm install piral-vue-3Verified import paths — ran on the pinned version, not inferred.
This quickstart demonstrates how to initialize a Piral application with the `piral-vue-3` plugin and register a simple Vue 3 component as a pilet page. It sets up a basic Piral factory, includes the Vue 3 plugin, and shows how a mock pilet could register a Vue component route.
Configure your pilet's `package.json` to declare `vue` as a `peerDependency`. Ensure your Piral shell is configured to provide `vue` as a shared dependency or that the `piral-vue-3` plugin handles its provisioning. Check bundler configurations (e.g., Webpack externals, Vite build options) for proper exclusion/sharing.
For Vue 2 projects, use `piral-vue` (the Vue 2 specific plugin). Ensure all Vue pilets within a Piral instance target the same major version of Vue to avoid framework conflicts.
Always implement a `teardown` function in your pilet's `setup` method. Ensure that any global event listeners, timers, or Vue instances created by your pilet are properly destroyed or unmounted within this `teardown` to release resources.
Ensure that your Vue 3 pilet and the Piral shell handle SSR correctly. If using `piral-vue-3` in an SSR context, make sure data fetching is completed before hydration and that client-specific code runs only in the browser environment. For client-only rendering, this error might indicate late-loaded content that causes DOM changes.
Verify that your Vue 3 component is correctly registered and mounted by the `piral-vue-3` plugin. Ensure that any Piral-specific API extensions (e.g., `app.foo()`) are accessed through the `PiletApi` provided to the `setup` function and not via Vue's internal mechanisms unless explicitly passed down.
Double-check the import path and name of your Vue component. Ensure it's correctly exported from its module and that your pilet's build process correctly bundles it. If using lazy loading, verify the dynamic import syntax and path.