Vue SVG Component Runtime

1.0.1 verified Fri May 01 auth: no javascript maintenance

Runtime library for rendering SVG files as Vue.js components, typically used alongside vue-svg-component-builder. Current version is 1.0.1. This is a lightweight peer dependency that provides the runtime support for SVG components; it is extracted as a separate package from v2.0.0 of the builder. Release cadence is low as it is stable. Differentiator: minimal runtime overhead, designed for Vue 2.x (>=2.5.0). Includes TypeScript type definitions.

Common errors

error TypeError: Cannot read property 'ast' of undefined ↓

cause compile() might return an object without an 'ast' property, or the SVG string is empty/invalid.

fix

Ensure the compiled result has an 'ast' property. Use compile(svgString).ast or check the library's output structure.

error Failed to mount component: template or render function not defined ↓

cause The build() function may return a component without a render function if the AST is malformed.

fix

Verify the SVG is valid and compile produces correct AST. Ensure Vue peer dependency is installed.

error Cannot find module 'vue-svg-component-runtime' ↓

cause Package not installed or not in node_modules.

fix

Run npm install vue-svg-component-runtime (or yarn add). This package is a peer dependency of vue-svg-component-builder for v2+.

Warnings

breaking In 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. ↓

fix Install vue-svg-component-runtime: npm install vue-svg-component-runtime

deprecated This package only supports Vue 2.x. Vue 3 is not supported. For Vue 3, use dedicated SVG component libraries. ↓

fix Use alternatives like vue-svg-loader or unplugin-vue-components for Vue 3.

gotcha The input to build() must be the AST output of vue-component-compiler, not raw SVG or other formats. ↓

fix Use compile() from vue-component-compiler to transform SVG string to AST before calling build().

gotcha Default import does not exist; must use named import { build }. ↓

fix Use import { build } from 'vue-svg-component-runtime'

Install

npm install vue-svg-component-runtime

yarn add vue-svg-component-runtime

pnpm add vue-svg-component-runtime

Imports

build

wrong

import build from 'vue-svg-component-runtime'

correct

import { build } from 'vue-svg-component-runtime'

Default export is not available; named export only.

build

wrong

const build = require('vue-svg-component-runtime')

correct

const { build } = require('vue-svg-component-runtime')

CommonJS require destructures the named export.

Quickstart

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