Registry /
web-framework / vue-svg-component-runtime
Install & Compatibility
Where this runs
No compatibility data collected yet for this library.
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
build
✓ import { build } from 'vue-svg-component-runtime'
✗ import build from 'vue-svg-component-runtime'
Default export is not available; named export only.
build
✓ const { build } = require('vue-svg-component-runtime')
✗ const build = require('vue-svg-component-runtime')
CommonJS require destructures the named export.
Shows how to compile an SVG string using vue-component-compiler and then build a Vue component using vue-svg-component-runtime.
import { build } from 'vue-svg-component-runtime';
import { compile } from 'vue-component-compiler';
import Vue from 'vue';
const svgString = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="red"/></svg>';
const compiled = compile(svgString);
const SvgComponent = build(compiled.ast);
new Vue({
template: '<div><svg-component /></div>',
components: { 'svg-component': SvgComponent }
}).$mount('#app');
Debug
Known issues
breakingIn v2.0.0 of vue-svg-component-builder, the runtime was extracted into this separate package. If you upgrade the builder, you must install vue-svg-component-runtime as a dependency.fixInstall vue-svg-component-runtime: npm install vue-svg-component-runtime
affects: vue-svg-component-builder >=2.0.0
deprecatedThis package only supports Vue 2.x. Vue 3 is not supported. For Vue 3, use dedicated SVG component libraries.fixUse alternatives like vue-svg-loader or unplugin-vue-components for Vue 3.
affects: all
gotchaThe input to build() must be the AST output of vue-component-compiler, not raw SVG or other formats.fixUse compile() from vue-component-compiler to transform SVG string to AST before calling build().
affects: all
gotchaDefault import does not exist; must use named import { build }.fixUse import { build } from 'vue-svg-component-runtime' affects: all
Errors
Common errors & fixes
TypeError: Cannot read property 'ast' of undefined
compile() might return an object without an 'ast' property, or the SVG string is empty/invalid.
fixEnsure the compiled result has an 'ast' property. Use compile(svgString).ast or check the library's output structure.
Failed to mount component: template or render function not defined
The build() function may return a component without a render function if the AST is malformed.
fixVerify the SVG is valid and compile produces correct AST. Ensure Vue peer dependency is installed.
Cannot find module 'vue-svg-component-runtime'
Package not installed or not in node_modules.
fixRun npm install vue-svg-component-runtime (or yarn add). This package is a peer dependency of vue-svg-component-builder for v2+.
Audit
Dependencies
vuerequiredPeer dependency; required at runtime for component creation. Expects Vue >= 2.5.0