Registry /
web-framework / require-extension-hooks-vue
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
plugin instance / configure
✓ const vuePlugin = require('require-extension-hooks-vue');
✗ import vuePlugin from 'require-extension-hooks-vue';
The package is CommonJS-first; direct ESM `import` will not work without a transpilation step or wrapper. This import provides the plugin object and its `configure` method.
Activate Vue hook
✓ require('require-extension-hooks').get('vue').plugin('vue');
✗ require('require-extension-hooks-vue');
The primary way to enable `.vue` file parsing is by calling `plugin('vue')` on the `require-extension-hooks` instance for the 'vue' extension. The simpler `hooks('vue').plugin('vue');` assumes `hooks` is already defined from `require('require-extension-hooks')`.
CLI registration
✓ require('require-extension-hooks-vue/register');
✗ require('require-extension-hooks-vue').register();
Use this specific entry point for simple command-line tool integration (e.g., `mocha --require`). This performs a side effect to register the hook.
COMPONENT_OPTIONS (for custom blocks)
✓ const { COMPONENT_OPTIONS } = require('require-extension-hooks-vue');
✗ import { COMPONENT_OPTIONS } from 'require-extension-hooks-vue';
This constant is primarily used within custom block hooks to modify the Vue component options object during compilation.
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);
}
}
Errors
Common errors & fixes
Error: Cannot find module 'require-extension-hooks'
The peer dependency `require-extension-hooks` is not installed in the project.
fixRun `npm install require-extension-hooks --save-dev`.
Error: Cannot find module 'vue-template-compiler'
The peer dependency `vue-template-compiler` is not installed, or the installed version is incompatible with the `2.5.x` requirement.
fixRun `npm install vue-template-compiler@2.5.x --save-dev` to ensure the correct version is present.
Error: Cannot find module 'pug' (or 'typescript', 'node-sass', etc.)
A `.vue` file contains a `<template lang="pug">` or `<script lang="ts">` (or similar) block, but the corresponding language compiler library is not installed in the project.
fixInstall the missing language compiler, e.g., `npm install pug --save-dev` for Pug templates, or `npm install typescript --save-dev` along with a TypeScript hook for TS scripts.
TypeError: YourComponent is not a constructor / Cannot read property 'render' of undefined
`require-extension-hooks-vue` processes the SFC into its options object, not a Vue constructor or directly runnable component.
fixThe `require()` call returns the component's options object. You typically pass this object to `Vue.extend()` or a testing utility (e.g., `@vue/test-utils`) for instantiation or mounting. Example: `const ComponentOptions = require('./MyComponent.vue'); // then use ComponentOptions`. Audit
Dependencies
require-extension-hooksrequiredCore dependency for registering and managing Node.js module extension hooks.
vue-template-compilerrequiredRequired for compiling Vue 2.x templates within the .vue SFCs. Specifically requires version 2.5.x.
pugoptionalOptional: Required if using Pug for templates (e.g., `<template lang="pug">`).
typescriptoptionalOptional: Required if using TypeScript for scripts (e.g., `<script lang="ts">`) and a corresponding TS hook.