{"id":28448,"library":"vue-inline","title":"vue-inline","description":"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.","status":"maintenance","version":"1.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/egoist/vue-inline","tags":["javascript","vue","inline"],"install":[{"cmd":"npm install vue-inline","lang":"bash","label":"npm"},{"cmd":"yarn add vue-inline","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-inline","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Default export is the plugin object; use with Vue.use(Inline, { data: {...} }) globally.","wrong":"import Inline from 'vue-inline/dist/vue-inline'","symbol":"Inline","correct":"import Inline from 'vue-inline'"},{"note":"makeComponent is a named export for creating a local inline component; do not default-import it.","wrong":"import makeComponent from 'vue-inline'","symbol":"makeComponent","correct":"import { makeComponent } from 'vue-inline'"},{"note":"The plugin expects a data option, not component registration directly.","wrong":"Vue.component('inline', Inline)","symbol":"Vue.use","correct":"Vue.use(Inline, { data: { foo: 'bar' } })"}],"quickstart":{"code":"import Vue from 'vue'\nimport Inline from 'vue-inline'\n\nVue.use(Inline, {\n  data: {\n    greeting: '<span style=\"color:red\">Hello</span>',\n    logo: require('./logo.svg')\n  }\n})\n\nnew Vue({\n  el: '#app',\n  template: '<div><inline name=\"greeting\"></inline><inline name=\"logo\"></inline></div>'\n})","lang":"javascript","description":"Demonstrates global registration with Vue.use and inline rendering of a string and an SVG in a template."},"warnings":[{"fix":"Always pass trusted content or sanitize strings before passing to data.","message":"The inline component renders raw HTML without sanitization; avoid using with untrusted data to prevent XSS.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Consider alternatives like vue-svg-inline or raw v-html with caution.","message":"Package is unmaintained since 2017; may not work with Vue 3 or modern build tools.","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"Use appropriate loaders (file-loader, svg-inline-loader) and ensure the required file returns inline content.","message":"Requires webpack or bundler to resolve require() calls in data option; otherwise logo.svg will be a path string, not actual SVG content.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-05-09T00:00:00.000Z","next_check":"2026-08-07T00:00:00.000Z","problems":[{"fix":"Ensure Vue is imported first: import Vue from 'vue'; import Inline from 'vue-inline';","cause":"Importing vue-inline in a non-Vue environment or before Vue is imported.","error":"Vue.use is not a function"},{"fix":"Either use Vue.use(Inline, { data }) or import { makeComponent } and register locally in components.","cause":"Component not registered globally or locally.","error":"Unknown custom element: <inline>"},{"fix":"Ensure the prop matches a key in the data object: <inline name=\"foo\"></inline>","cause":"Missing or misspelled 'name' prop on <inline> element.","error":"TypeError: Cannot read property 'name' of undefined"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}