kritzel-vue

library0.1.86jsnpmunverified

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.

web-framework

npm install kritzel-vue

github ↗package ↗

INSTALL

IMPORT

SIG · KRITZEL-VUE

kritzel-vue

web-frameworkjavascriptv0.1.86

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

ComponentLibrary

✓ import { ComponentLibrary } from 'kritzel-vue'

✗ import ComponentLibrary from 'kritzel-vue'

Used as a Vue plugin via `app.use()` for global registration of Kritzel components.

KritzelEngine

✓ import { KritzelEngine } from 'kritzel-vue'

✗ const { KritzelEngine } = require('kritzel-vue')

Named import for individual Kritzel components, intended for direct use in Vue templates.

KritzelControls

✓ import { KritzelControls } from 'kritzel-vue'

✗ import * as Kritzel from 'kritzel-vue'

Components are exported as named exports; default or wildcard imports will not provide direct component references.

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.

Debug

Known issues

breakingAs 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.

affects: <1.0.0

gotchaThe 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.

affects: >=0.1.0

gotchaTo 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`).

affects: >=0.1.0

Errors

Common errors & fixes

Failed to resolve component: KritzelEngine

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')

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.

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.

Upgrade

Version history

0.1.86latest on npm

Audit

Dependencies

kritzel-stencilrequiredThis package provides the core Web Components that kritzel-vue wraps for Vue.js. It's a required peer dependency.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/kasual1/kritzel ↗

packagehttps://www.npmjs.com/package/kritzel-vue ↗