Vue Runtime Helpers

1.1.2 · abandoned · verified Sun Apr 19

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.

Common errors

Warnings

Install

Imports

Quickstart

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.

/*
This example is conceptual and demonstrates the *purpose* of vue-runtime-helpers.
In a real Vue project, these helpers are used internally by build tools
(e.g., Vite, Vue CLI) to process Single File Components (SFCs) and are
NOT typically imported or called directly by application developers.
These functions normalize component options and inject styles behind the scenes.
*/

// Imagine these are internal exports from vue-runtime-helpers
// In a real build environment, they would be imported by a plugin like @vitejs/plugin-vue
import { normalizeComponent, createInjector } from 'vue-runtime-helpers'; // Correct import path for tooling

// A raw component definition, as it might be parsed from a .vue file's <script> block.
// This is an oversimplification; actual SFC compilation is more complex.
const rawComponentOptions = {
  name: 'HelloWorld',
  props: {
    msg: String,
  },
  data() {
    return { count: 0 };
  },
  methods: {
    increment() {
      this.count++;
    },
  },
  template: '<div><h1>{{ msg }}</h1><button @click="increment">Count: {{ count }}</button></div>',
  // Styles extracted from the <style> block of an SFC
  styles: ['h1 { color: #42b983; } button { background-color: #eee; border: 1px solid #ccc; padding: 5px 10px; cursor: pointer; }']
};

// 1. Conceptual usage of normalizeComponent:
// This function takes raw component options and normalizes them into a format
// that the Vue runtime expects. It handles various transformations and optimizations.
// The parameters are simplified here; actual usage in tooling is more involved.
const normalizedComponent = normalizeComponent(
  rawComponentOptions,
  () => { /* Render function would be compiled here */ },
  [], // scopeId for scoped CSS
  false, // isSsr
  null, // shadowMode
  null, // createInjector (often passed recursively or handled externally)
  null, // i18n
  true, // isProd
  null  // globals
);

console.log('--- Conceptual normalizeComponent Output ---');
console.log('Normalized component exports (simplified):', normalizedComponent.exports);
console.log('Component name:', normalizedComponent.exports.name);
console.log('Component props:', normalizedComponent.exports.props);

// 2. Conceptual usage of createInjector (for injecting styles):
// This function typically returns an object with methods to add or remove styles.
// Build tools use this to apply component-specific styles to the DOM or Shadow DOM.
const styleInjector = createInjector({}); // Configuration might be passed here

console.log('\n--- Conceptual createInjector Output ---');
const stylesToInject = rawComponentOptions.styles;
if (stylesToInject && stylesToInject.length > 0) {
  console.log('Styles prepared for injection:', stylesToInject);
  // In a real scenario, styleInjector would manage the <style> tags.
  // For instance, it might append them to the document head or a shadow root,
  // ensuring they are correctly scoped if needed.
  console.log('// Style injector would apply these styles to the document or shadow DOM.');
}

// To reiterate, typical Vue application development does not involve these helpers directly.
// You would write a .vue file, and your build setup (Vite, Vue CLI) would use these internal
// utilities to turn your SFC into runnable JavaScript and CSS.
// Example of how an end-user writes a component:
/*
<template>
  <div>
    <h1>{{ msg }}</h1>
    <button @click="increment">Count: {{ count }}</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

defineProps<{ msg: string }>();

const count = ref(0);
const increment = () => {
  count.value++;
};
</script>

<style scoped>
h1 { color: #42b983; }
button {
  background-color: #eee;
  border: 1px solid #ccc;
  padding: 5px 10px;
  cursor: pointer;
}
</style>
*/

view raw JSON →