{"id":11217,"library":"kritzel-vue","title":"Kritzel Vue Integration","description":"The `kritzel-vue` package (current version 0.1.86) serves as the official Vue.js integration layer for components built with the Kritzel Stencil library. It enables developers to seamlessly embed and utilize Kritzel's UI components directly within their Vue 3 applications, providing an idiomatic Vue experience around the underlying Stencil elements. As a pre-1.0 release, indicated by its version number, `kritzel-vue` is likely under active development with a potentially frequent release cadence. This also implies that breaking changes to its API surface are probable as it matures towards a stable 1.0 release. Its key differentiator lies in specifically facilitating the use of `kritzel-stencil` components in Vue, abstracting away the complexities of integrating Web Components into a Vue rendering environment and leveraging Vue's plugin system for global component registration.","status":"active","version":"0.1.86","language":"javascript","source_language":"en","source_url":"https://github.com/kasual1/kritzel","tags":["javascript","typescript"],"install":[{"cmd":"npm install kritzel-vue","lang":"bash","label":"npm"},{"cmd":"yarn add kritzel-vue","lang":"bash","label":"yarn"},{"cmd":"pnpm add kritzel-vue","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"This package provides the core Web Components that kritzel-vue wraps for Vue.js. It's a required peer dependency.","package":"kritzel-stencil","optional":false}],"imports":[{"note":"Used as a Vue plugin via `app.use()` for global registration of Kritzel components.","wrong":"import ComponentLibrary from 'kritzel-vue'","symbol":"ComponentLibrary","correct":"import { ComponentLibrary } from 'kritzel-vue'"},{"note":"Named import for individual Kritzel components, intended for direct use in Vue templates.","wrong":"const { KritzelEngine } = require('kritzel-vue')","symbol":"KritzelEngine","correct":"import { KritzelEngine } from 'kritzel-vue'"},{"note":"Components are exported as named exports; default or wildcard imports will not provide direct component references.","wrong":"import * as Kritzel from 'kritzel-vue'","symbol":"KritzelControls","correct":"import { KritzelControls } from 'kritzel-vue'"}],"quickstart":{"code":"import { createApp } from 'vue';\nimport App from './App.vue';\nimport { ComponentLibrary, KritzelEngine, KritzelControls } from 'kritzel-vue';\n\nconst app = createApp(App);\napp.use(ComponentLibrary);\napp.mount('#app');\n\n// In your App.vue or another component:\n// <script setup lang=\"ts\">\n// import { KritzelEngine, KritzelControls } from 'kritzel-vue'; // Already imported above if using globally via plugin\n// </script>\n\n// <template>\n//   <div>\n//     <h1>My Kritzel App</h1>\n//     <KritzelEngine></KritzelEngine>\n//     <KritzelControls></KritzelControls>\n//   </div>\n// </template>\n\n// To run this, you would typically need a basic Vue project structure\n// and ensure 'kritzel-stencil' is also installed as a peer dependency.","lang":"typescript","description":"Demonstrates initializing a Vue 3 application, registering the Kritzel component library as a plugin, and using Kritzel components in a template."},"warnings":[{"fix":"Regularly check the GitHub repository and package changelog for updates and migration guides. Pin to specific patch versions if stability is critical.","message":"As a pre-1.0 library (version 0.1.86), `kritzel-vue` APIs are subject to change without adhering to semantic versioning. Frequent breaking changes are expected as the library matures.","severity":"breaking","affected_versions":"<1.0.0"},{"fix":"Ensure `npm install kritzel-stencil` or `yarn add kritzel-stencil` is run in your project.","message":"The core `kritzel-stencil` package is a peer dependency and must be installed separately alongside `kritzel-vue`. Without it, Kritzel components will not render or function correctly.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Add `import { ComponentLibrary } from 'kritzel-vue';` and `createApp(App).use(ComponentLibrary).mount('#app');` to your main Vue entry file (e.g., `main.ts`).","message":"To ensure Kritzel components are properly registered and available throughout your Vue application, you must use `app.use(ComponentLibrary)` during your Vue application's setup.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `app.use(ComponentLibrary)` is called in your main Vue setup, or explicitly import the component (`import { KritzelEngine } from 'kritzel-vue';`) in the script section of the component where it's used.","cause":"Kritzel components were not registered globally via the ComponentLibrary plugin, or the component was not imported locally.","error":"Failed to resolve component: KritzelEngine"},{"fix":"Verify `import { ComponentLibrary } from 'kritzel-vue'` is correct and that `app.use(ComponentLibrary)` is called on a valid Vue application instance.","cause":"The `ComponentLibrary` was not correctly imported or referenced when attempting to use it as a Vue plugin.","error":"Cannot read properties of undefined (reading 'use')"},{"fix":"Install the peer dependency by running `npm install kritzel-stencil` or `yarn add kritzel-stencil` in your project.","cause":"The `kritzel-stencil` package, which is a required peer dependency, is not installed.","error":"This package has unmet peer dependencies."}],"ecosystem":"npm"}