{"id":15805,"library":"require-extension-hooks-vue","title":"Require Extension Hooks Vue","description":"`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.","status":"maintenance","version":"3.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/jackmellis/require-extension-hooks-vue","tags":["javascript"],"install":[{"cmd":"npm install require-extension-hooks-vue","lang":"bash","label":"npm"},{"cmd":"yarn add require-extension-hooks-vue","lang":"bash","label":"yarn"},{"cmd":"pnpm add require-extension-hooks-vue","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core dependency for registering and managing Node.js module extension hooks.","package":"require-extension-hooks","optional":false},{"reason":"Required for compiling Vue 2.x templates within the .vue SFCs. Specifically requires version 2.5.x.","package":"vue-template-compiler","optional":false},{"reason":"Optional: Required if using Pug for templates (e.g., `<template lang=\"pug\">`).","package":"pug","optional":true},{"reason":"Optional: Required if using TypeScript for scripts (e.g., `<script lang=\"ts\">`) and a corresponding TS hook.","package":"typescript","optional":true}],"imports":[{"note":"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.","wrong":"import vuePlugin from 'require-extension-hooks-vue';","symbol":"plugin instance / configure","correct":"const vuePlugin = require('require-extension-hooks-vue');"},{"note":"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')`.","wrong":"require('require-extension-hooks-vue');","symbol":"Activate Vue hook","correct":"require('require-extension-hooks').get('vue').plugin('vue');"},{"note":"Use this specific entry point for simple command-line tool integration (e.g., `mocha --require`). This performs a side effect to register the hook.","wrong":"require('require-extension-hooks-vue').register();","symbol":"CLI registration","correct":"require('require-extension-hooks-vue/register');"},{"note":"This constant is primarily used within custom block hooks to modify the Vue component options object during compilation.","wrong":"import { COMPONENT_OPTIONS } from 'require-extension-hooks-vue';","symbol":"COMPONENT_OPTIONS (for custom blocks)","correct":"const { COMPONENT_OPTIONS } = require('require-extension-hooks-vue');"}],"quickstart":{"code":"const hooks = require('require-extension-hooks');\nconst vuePlugin = require('require-extension-hooks-vue');\nconst path = require('path');\nconst fs = require('fs');\n\n// Ensure required peer dependencies are installed:\n// npm install --save-dev require-extension-hooks require-extension-hooks-vue vue-template-compiler\n\n// Optional: Configure the plugin (e.g., enable source maps)\nvuePlugin.configure({ sourceMaps: true });\n\n// Register the Vue hook to enable .vue file parsing in Node.js\nhooks('vue').plugin('vue');\n\n// Create a dummy .vue file for demonstration\nconst vueFilePath = path.join(__dirname, 'MyExampleComponent.vue');\nconst vueContent = `\n<template>\n  <div class=\"my-component\">\n    <h1>Hello from Vue!</h1>\n    <p>{{ message }}</p>\n  </div>\n</template>\n\n<script>\nmodule.exports = {\n  name: 'MyExampleComponent',\n  data() {\n    return {\n      message: 'This is a .vue component loaded in Node!'\n    };\n  },\n  created() {\n    console.log('MyExampleComponent created in Node context!');\n  }\n};\n</script>\n\n<style scoped>\n.my-component h1 {\n  color: purple;\n}\n</style>\n`;\n\nfs.writeFileSync(vueFilePath, vueContent);\n\n// Now you can require .vue files directly in Node.js\ntry {\n  const ComponentOptions = require(vueFilePath);\n  console.log('Successfully loaded Vue component options:');\n  console.log('Component name:', ComponentOptions.name);\n\n  // In a test scenario, you might inspect its render function or data\n  if (typeof ComponentOptions.data === 'function') {\n    const data = ComponentOptions.data();\n    console.log('Component data:', data);\n  }\n\n  // You could then use these options with a Vue instance or testing utility\n  // For example, if you had Vue installed:\n  // const Vue = require('vue');\n  // const instance = new Vue(ComponentOptions).$mount();\n  // console.log(instance.$el.innerHTML);\n\n} catch (error) {\n  console.error('Error loading Vue component:', error.message);\n  console.error('Ensure all peer dependencies are installed, and your .vue file is valid.');\n} finally {\n  // Clean up the dummy file\n  if (fs.existsSync(vueFilePath)) {\n    fs.unlinkSync(vueFilePath);\n  }\n}\n","lang":"javascript","description":"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."},"warnings":[{"fix":"Review `.vue` files, especially those with no `<script>` block or complex functional components, and adapt to the new compilation behavior. Test thoroughly after upgrading to v2.0.0+.","message":"Version 2.0.0 switched its internal compiler from `vue-template-compiler`'s `parseComponent` to `@vue/component-compiler-utils`. This change potentially reverses the behavior for scriptless components introduced in v1.1.0 and might affect specific custom functional component implementations, leading to different compilation results.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Ensure `npm install require-extension-hooks vue-template-compiler@2.5.x --save-dev` is run in your project.","message":"This package has critical peer dependencies (`require-extension-hooks` and `vue-template-compiler@2.5.x`) that must be installed alongside it. Failure to install these will result in runtime errors when attempting to use the hook.","severity":"gotcha","affected_versions":">=0.3.0"},{"fix":"Install the necessary language-specific packages (e.g., `npm install pug --save-dev`) and, if required, register an `require-extension-hooks` for that extension (e.g., `hooks('ts').push(...)`).","message":"When using alternative languages for templates or scripts (e.g., `<template lang=\"pug\">`, `<script lang=\"ts\">`), `require-extension-hooks-vue` will look for a corresponding hook or library for that language. These compilers/hooks (e.g., `pug`, `typescript` + a TypeScript hook) must be separately installed and configured.","severity":"gotcha","affected_versions":">=0.3.0"},{"fix":"For Vue 3 projects, investigate alternative solutions for server-side SFC compilation, such as Vite's server-side rendering (SSR) capabilities or other build tool-specific setups that support Vue 3.","message":"This library is designed for Vue 2.x projects due to its reliance on `vue-template-compiler@2.x`. It is not compatible with Vue 3.x SFCs or their associated compilation tools (`@vue/compiler-sfc`).","severity":"gotcha","affected_versions":"All versions"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Run `npm install require-extension-hooks --save-dev`.","cause":"The peer dependency `require-extension-hooks` is not installed in the project.","error":"Error: Cannot find module 'require-extension-hooks'"},{"fix":"Run `npm install vue-template-compiler@2.5.x --save-dev` to ensure the correct version is present.","cause":"The peer dependency `vue-template-compiler` is not installed, or the installed version is incompatible with the `2.5.x` requirement.","error":"Error: Cannot find module 'vue-template-compiler'"},{"fix":"Install 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.","cause":"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.","error":"Error: Cannot find module 'pug' (or 'typescript', 'node-sass', etc.)"},{"fix":"The `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`.","cause":"`require-extension-hooks-vue` processes the SFC into its options object, not a Vue constructor or directly runnable component.","error":"TypeError: YourComponent is not a constructor / Cannot read property 'render' of undefined"}],"ecosystem":"npm"}