vue-inline

1.0.1 verified Sat May 09 auth: no javascript maintenance

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.

Common errors

error Vue.use is not a function ↓

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

error Unknown custom element: <inline> ↓

cause Component not registered globally or locally.

fix

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

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

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

fix

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

Warnings

gotcha The 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.

deprecated Package 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.

gotcha Requires 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.

Install

npm install vue-inline

yarn add vue-inline

pnpm add vue-inline

Imports

Inline
wrong
```
import Inline from 'vue-inline/dist/vue-inline'
```
correct
```
import Inline from 'vue-inline'
```
Default export is the plugin object; use with Vue.use(Inline, { data: {...} }) globally.
makeComponent
wrong
```
import makeComponent from 'vue-inline'
```
correct
```
import { makeComponent } from 'vue-inline'
```
makeComponent is a named export for creating a local inline component; do not default-import it.
Vue.use
wrong
```
Vue.component('inline', Inline)
```
correct
```
Vue.use(Inline, { data: { foo: 'bar' } })
```
The plugin expects a data option, not component registration directly.

Quickstart

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