Require Extension Hooks Vue

3.0.0 · maintenance · verified Tue Apr 21

`require-extension-hooks-vue` is a Node.js package designed to enable the server-side parsing and compilation of Vue 2.x single-file components (SFCs). It works in conjunction with `require-extension-hooks` to integrate into Node's module `require` mechanism, allowing developers to import `.vue` files directly within Node.js environments. This functionality is particularly useful for server-side rendering, browserless unit testing, or other Node.js-based build processes that need to consume Vue SFCs. The current stable version is 3.0.0. The package automatically converts `<template>` blocks into Vue render functions, supports external template and script sources, and handles various `lang` attributes (e.g., `pug`, `ts`) by dynamically looking for additional `require-extension-hooks` or compatible external libraries. It also provides a flexible mechanism for processing custom blocks within SFCs. The release cadence appears infrequent, with significant internal compiler changes typically occurring between major versions.

Common errors

Warnings

Install

Imports

Quickstart

This quickstart demonstrates how to register the `require-extension-hooks-vue` plugin and then successfully `require()` a `.vue` single-file component directly in a Node.js environment. It shows how the component's options object is made available and how to access its properties.

const hooks = require('require-extension-hooks');
const vuePlugin = require('require-extension-hooks-vue');
const path = require('path');
const fs = require('fs');

// Ensure required peer dependencies are installed:
// npm install --save-dev require-extension-hooks require-extension-hooks-vue vue-template-compiler

// Optional: Configure the plugin (e.g., enable source maps)
vuePlugin.configure({ sourceMaps: true });

// Register the Vue hook to enable .vue file parsing in Node.js
hooks('vue').plugin('vue');

// Create a dummy .vue file for demonstration
const vueFilePath = path.join(__dirname, 'MyExampleComponent.vue');
const vueContent = `
<template>
  <div class="my-component">
    <h1>Hello from Vue!</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
module.exports = {
  name: 'MyExampleComponent',
  data() {
    return {
      message: 'This is a .vue component loaded in Node!'
    };
  },
  created() {
    console.log('MyExampleComponent created in Node context!');
  }
};
</script>

<style scoped>
.my-component h1 {
  color: purple;
}
</style>
`;

fs.writeFileSync(vueFilePath, vueContent);

// Now you can require .vue files directly in Node.js
try {
  const ComponentOptions = require(vueFilePath);
  console.log('Successfully loaded Vue component options:');
  console.log('Component name:', ComponentOptions.name);

  // In a test scenario, you might inspect its render function or data
  if (typeof ComponentOptions.data === 'function') {
    const data = ComponentOptions.data();
    console.log('Component data:', data);
  }

  // You could then use these options with a Vue instance or testing utility
  // For example, if you had Vue installed:
  // const Vue = require('vue');
  // const instance = new Vue(ComponentOptions).$mount();
  // console.log(instance.$el.innerHTML);

} catch (error) {
  console.error('Error loading Vue component:', error.message);
  console.error('Ensure all peer dependencies are installed, and your .vue file is valid.');
} finally {
  // Clean up the dummy file
  if (fs.existsSync(vueFilePath)) {
    fs.unlinkSync(vueFilePath);
  }
}

view raw JSON →