Kritzel Vue Integration

0.1.86 · active · verified Sun Apr 19

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.

Common errors

```
Failed to resolve component: KritzelEngine
```
cause Kritzel components were not registered globally via the ComponentLibrary plugin, or the component was not imported locally.

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.
```
Cannot read properties of undefined (reading 'use')
```
cause The `ComponentLibrary` was not correctly imported or referenced when attempting to use it as a Vue plugin.

fix Verify `import { ComponentLibrary } from 'kritzel-vue'` is correct and that `app.use(ComponentLibrary)` is called on a valid Vue application instance.
```
This package has unmet peer dependencies.
```
cause The `kritzel-stencil` package, which is a required peer dependency, is not installed.

fix Install the peer dependency by running `npm install kritzel-stencil` or `yarn add kritzel-stencil` in your project.

Warnings

breaking 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.
Fix: Regularly check the GitHub repository and package changelog for updates and migration guides. Pin to specific patch versions if stability is critical.
gotcha 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.
Fix: Ensure `npm install kritzel-stencil` or `yarn add kritzel-stencil` is run in your project.
gotcha 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.
Fix: Add `import { ComponentLibrary } from 'kritzel-vue';` and `createApp(App).use(ComponentLibrary).mount('#app');` to your main Vue entry file (e.g., `main.ts`).

Install

npm install kritzel-vue npm
yarn add kritzel-vue yarn
pnpm add kritzel-vue pnpm

Imports

ComponentLibrary
wrong:
```
import ComponentLibrary from 'kritzel-vue'
```
correct:
```
import { ComponentLibrary } from 'kritzel-vue'
```
Used as a Vue plugin via `app.use()` for global registration of Kritzel components.
KritzelEngine
wrong:
```
const { KritzelEngine } = require('kritzel-vue')
```
correct:
```
import { KritzelEngine } from 'kritzel-vue'
```
Named import for individual Kritzel components, intended for direct use in Vue templates.
KritzelControls
wrong:
```
import * as Kritzel from 'kritzel-vue'
```
correct:
```
import { KritzelControls } from 'kritzel-vue'
```
Components are exported as named exports; default or wildcard imports will not provide direct component references.

Quickstart

Demonstrates initializing a Vue 3 application, registering the Kritzel component library as a plugin, and using Kritzel components in a template.

import { createApp } from 'vue';
import App from './App.vue';
import { ComponentLibrary, KritzelEngine, KritzelControls } from 'kritzel-vue';

const app = createApp(App);
app.use(ComponentLibrary);
app.mount('#app');

// In your App.vue or another component:
// <script setup lang="ts">
// import { KritzelEngine, KritzelControls } from 'kritzel-vue'; // Already imported above if using globally via plugin
// </script>

// <template>
//   <div>
//     <h1>My Kritzel App</h1>
//     <KritzelEngine></KritzelEngine>
//     <KritzelControls></KritzelControls>
//   </div>
// </template>

// To run this, you would typically need a basic Vue project structure
// and ensure 'kritzel-stencil' is also installed as a peer dependency.

view raw JSON →