{"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.","language":"javascript","status":"maintenance","last_verified":"Tue Apr 21","install":{"commands":["npm install require-extension-hooks-vue"],"cli":null},"imports":["const vuePlugin = require('require-extension-hooks-vue');","require('require-extension-hooks').get('vue').plugin('vue');","require('require-extension-hooks-vue/register');","const { COMPONENT_OPTIONS } = require('require-extension-hooks-vue');"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}