vue-inline

library1.0.1jsnpmunverified

Vue plugin that allows inline rendering of strings, SVGs, or components within templates by registering a global <inline> component or using a locally scoped component. Version 1.0.1 is the latest stable release; last updated in 2017 with infrequent updates. Differentiators: provides a declarative, template-driven approach to embedding inline content without manual v-html usage. Alternatives like vue-svg-inline focus specifically on SVGs, whereas vue-inline supports arbitrary strings and file-loader output via require.

web-framework

npm install vue-inline

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-INLINE

vue-inline

web-frameworkjavascriptv1.0.1

harness data pending

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.

Inline

✓ import Inline from 'vue-inline'

✗ import Inline from 'vue-inline/dist/vue-inline'

Default export is the plugin object; use with Vue.use(Inline, { data: {...} }) globally.

makeComponent

✓ import { makeComponent } from 'vue-inline'

✗ import makeComponent from 'vue-inline'

makeComponent is a named export for creating a local inline component; do not default-import it.

Vue.use

✓ Vue.use(Inline, { data: { foo: 'bar' } })

✗ Vue.component('inline', Inline)

The plugin expects a data option, not component registration directly.

Demonstrates global registration with Vue.use and inline rendering of a string and an SVG in a template.

import Vue from 'vue' import Inline from 'vue-inline' Vue.use(Inline, { data: { greeting: '<span style="color:red">Hello</span>', logo: require('./logo.svg') } }) new Vue({ el: '#app', template: '<div><inline name="greeting"></inline><inline name="logo"></inline></div>' })

Debug

Known issues

gotchaThe inline component renders raw HTML without sanitization; avoid using with untrusted data to prevent XSS.

fix

Always pass trusted content or sanitize strings before passing to data.

affects: >=1.0.0

deprecatedPackage is unmaintained since 2017; may not work with Vue 3 or modern build tools.

fix

Consider alternatives like vue-svg-inline or raw v-html with caution.

affects: >=1.0.0

gotchaRequires webpack or bundler to resolve require() calls in data option; otherwise logo.svg will be a path string, not actual SVG content.

fix

Use appropriate loaders (file-loader, svg-inline-loader) and ensure the required file returns inline content.

affects: >=1.0.0

Errors

Common errors & fixes

Vue.use is not a function

Importing vue-inline in a non-Vue environment or before Vue is imported.

fix

Ensure Vue is imported first: import Vue from 'vue'; import Inline from 'vue-inline';

Unknown custom element: <inline>

Component not registered globally or locally.

fix

Either use Vue.use(Inline, { data }) or import { makeComponent } and register locally in components.

TypeError: Cannot read property 'name' of undefined

Missing or misspelled 'name' prop on <inline> element.

fix

Ensure the prop matches a key in the data object: <inline name="foo"></inline>

Upgrade

Version history

1.0.1latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

7 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/egoist/vue-inline ↗

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