{"id":15043,"library":"vue-runtime-helpers","title":"Vue Runtime Helpers","description":"vue-runtime-helpers is a utility package that provides internal runtime helpers crucial for the compilation and rendering of Vue Single File Components (SFCs). These helpers are primarily consumed by Vue build tools such as `vue-loader` for Webpack, `@vitejs/plugin-vue` for Vite, and older tools like `rollup-plugin-vue`. Its core functionalities include `normalizeComponent`, which standardizes component options for the Vue runtime, and `createInjector`, used for injecting component-scoped styles. While the package itself, currently at version 1.1.2, has not seen active development since its last release seven years ago, its underlying concepts and the problems it solves (like component normalization and style injection) remain integral to the Vue ecosystem's build pipeline. It is not intended for direct consumption by most application developers but rather serves as low-level plumbing, with its essential logic now absorbed or re-implemented within actively maintained Vue tooling. It does not follow an independent release cadence.","status":"abandoned","version":"1.1.2","language":"javascript","source_language":"en","source_url":"https://github.com/znck/vue-runtime-helpers","tags":["javascript"],"install":[{"cmd":"npm install vue-runtime-helpers","lang":"bash","label":"npm"},{"cmd":"yarn add vue-runtime-helpers","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-runtime-helpers","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Primarily for tooling; not typically imported by application code. ESM-first, but older tooling might use CJS require.","wrong":"const normalizeComponent = require('vue-runtime-helpers').normalizeComponent;","symbol":"normalizeComponent","correct":"import { normalizeComponent } from 'vue-runtime-helpers';"},{"note":"Primarily for tooling; used to handle style injection. ESM-first.","wrong":"const createInjector = require('vue-runtime-helpers').createInjector;","symbol":"createInjector","correct":"import { createInjector } from 'vue-runtime-helpers';"}],"quickstart":{"code":"/*\nThis example is conceptual and demonstrates the *purpose* of vue-runtime-helpers.\nIn a real Vue project, these helpers are used internally by build tools\n(e.g., Vite, Vue CLI) to process Single File Components (SFCs) and are\nNOT typically imported or called directly by application developers.\nThese functions normalize component options and inject styles behind the scenes.\n*/\n\n// Imagine these are internal exports from vue-runtime-helpers\n// In a real build environment, they would be imported by a plugin like @vitejs/plugin-vue\nimport { normalizeComponent, createInjector } from 'vue-runtime-helpers'; // Correct import path for tooling\n\n// A raw component definition, as it might be parsed from a .vue file's <script> block.\n// This is an oversimplification; actual SFC compilation is more complex.\nconst rawComponentOptions = {\n  name: 'HelloWorld',\n  props: {\n    msg: String,\n  },\n  data() {\n    return { count: 0 };\n  },\n  methods: {\n    increment() {\n      this.count++;\n    },\n  },\n  template: '<div><h1>{{ msg }}</h1><button @click=\"increment\">Count: {{ count }}</button></div>',\n  // Styles extracted from the <style> block of an SFC\n  styles: ['h1 { color: #42b983; } button { background-color: #eee; border: 1px solid #ccc; padding: 5px 10px; cursor: pointer; }']\n};\n\n// 1. Conceptual usage of normalizeComponent:\n// This function takes raw component options and normalizes them into a format\n// that the Vue runtime expects. It handles various transformations and optimizations.\n// The parameters are simplified here; actual usage in tooling is more involved.\nconst normalizedComponent = normalizeComponent(\n  rawComponentOptions,\n  () => { /* Render function would be compiled here */ },\n  [], // scopeId for scoped CSS\n  false, // isSsr\n  null, // shadowMode\n  null, // createInjector (often passed recursively or handled externally)\n  null, // i18n\n  true, // isProd\n  null  // globals\n);\n\nconsole.log('--- Conceptual normalizeComponent Output ---');\nconsole.log('Normalized component exports (simplified):', normalizedComponent.exports);\nconsole.log('Component name:', normalizedComponent.exports.name);\nconsole.log('Component props:', normalizedComponent.exports.props);\n\n// 2. Conceptual usage of createInjector (for injecting styles):\n// This function typically returns an object with methods to add or remove styles.\n// Build tools use this to apply component-specific styles to the DOM or Shadow DOM.\nconst styleInjector = createInjector({}); // Configuration might be passed here\n\nconsole.log('\\n--- Conceptual createInjector Output ---');\nconst stylesToInject = rawComponentOptions.styles;\nif (stylesToInject && stylesToInject.length > 0) {\n  console.log('Styles prepared for injection:', stylesToInject);\n  // In a real scenario, styleInjector would manage the <style> tags.\n  // For instance, it might append them to the document head or a shadow root,\n  // ensuring they are correctly scoped if needed.\n  console.log('// Style injector would apply these styles to the document or shadow DOM.');\n}\n\n// To reiterate, typical Vue application development does not involve these helpers directly.\n// You would write a .vue file, and your build setup (Vite, Vue CLI) would use these internal\n// utilities to turn your SFC into runnable JavaScript and CSS.\n// Example of how an end-user writes a component:\n/*\n<template>\n  <div>\n    <h1>{{ msg }}</h1>\n    <button @click=\"increment\">Count: {{ count }}</button>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue';\n\ndefineProps<{ msg: string }>();\n\nconst count = ref(0);\nconst increment = () => {\n  count.value++;\n};\n</script>\n\n<style scoped>\nh1 { color: #42b983; }\nbutton {\n  background-color: #eee;\n  border: 1px solid #ccc;\n  padding: 5px 10px;\n  cursor: pointer;\n}\n</style>\n*/","lang":"typescript","description":"This quickstart illustrates the conceptual roles of `normalizeComponent` and `createInjector` within the Vue build pipeline, showcasing how they process raw component options and styles from SFCs. It emphasizes that these are internal tooling functions, not for direct application use."},"warnings":[{"fix":"Ensure `rollup-plugin-commonjs` is installed and listed in your `rollup.config.js` plugins array *before* `rollup-plugin-vue`. This ensures CommonJS modules (which `vue-runtime-helpers` might be treated as, or which it depended on in older contexts) are correctly processed.","message":"When upgrading `rollup-plugin-vue` to version `5.1.2` or later, direct internal imports of `vue-runtime-helpers` were introduced, potentially causing build failures if `rollup-plugin-commonjs` was not correctly configured.","severity":"breaking","affected_versions":"rollup-plugin-vue >= 5.1.2"},{"fix":"Rely on official Vue build tools (Vite, Vue CLI) to handle the compilation and runtime injection of SFCs. Custom usage of this package is reserved for advanced tooling authors only.","message":"This package (`vue-runtime-helpers`) is an internal dependency of Vue's build tooling (e.g., `vue-loader`, `@vitejs/plugin-vue`). Its APIs are not part of Vue's public contract and are not intended for direct use by application developers. Directly importing or using these helpers can lead to unpredictable behavior and is not supported.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Be aware that new features, bug fixes, or security patches will come from updates to your consuming Vue build tools (e.g., `@vitejs/plugin-vue`, `vue-loader`), not from this package directly. It remains stable as a plumbing piece but lacks independent evolution.","message":"The `vue-runtime-helpers` package itself has been effectively unmaintained since its last release over seven years ago. While its underlying functionality is critical, its direct development as a standalone package has ceased. Functionality is now integrated or re-implemented within actively maintained build tools.","severity":"deprecated","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Add or ensure `rollup-plugin-commonjs` is present in your `rollup.config.js` and placed *before* `rollup-plugin-vue`. Example: `plugins: [commonjs(), vue()]`.","cause":"This error typically occurs in Rollup builds where `rollup-plugin-vue` (from v5.1.2 onwards) attempts to import `vue-runtime-helpers` as an ES module, but the CommonJS plugin required for proper resolution is either missing or incorrectly ordered.","error":"Uncaught TypeError: Failed to resolve module specifier \"vue-runtime-helpers\""},{"fix":"Verify that all Vue-related dependencies (e.g., `vue`, `vue-loader`, `@vue/compiler-sfc`) are compatible and up-to-date. Ensure your Webpack configuration correctly handles module resolution for Node.js packages. If using `vue-loader`, ensure it's correctly configured in your Webpack rules.","cause":"Similar to Rollup issues, this indicates that Webpack or its associated loaders (`vue-loader`) cannot locate the `vue-runtime-helpers` module, often due to an incorrect configuration or incompatible versions of Vue-related packages.","error":"Webpack compilation failed: Module not found: Error: Can't resolve 'vue-runtime-helpers' in ..."}],"ecosystem":"npm"}