{"id":26494,"library":"touchui-template-compiler","title":"Vue 2 Template Compiler","description":"Pre-compiles Vue 2.0 templates into render functions to avoid runtime compilation overhead and CSP restrictions. Current stable version is 2.7.16, the final Vue 2 release (EOL December 31, 2023). This package is auto-generated from Vue core; for most cases use vue-loader or vueify instead. It supports custom compile-time modules and directives, SFC parsing, and provides compile() and compileToFunctions() APIs. The returned render function uses 'with' and cannot be used in strict mode. Key differentiator: low-level compiler for build tools, distinct from runtime-only Vue builds.","status":"deprecated","version":"2.4.8","language":"javascript","source_language":"en","source_url":"https://github.com/vuejs/vue","tags":["javascript","vue","compiler"],"install":[{"cmd":"npm install touchui-template-compiler","lang":"bash","label":"npm"},{"cmd":"yarn add touchui-template-compiler","lang":"bash","label":"yarn"},{"cmd":"pnpm add touchui-template-compiler","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Works both as ESM named import and CommonJS require. CommonJS is more common for Node.js tooling.","wrong":"const vueTemplateCompiler = require('vue-template-compiler'); const compile = vueTemplateCompiler.compile;","symbol":"compile","correct":"import { compile } from 'vue-template-compiler'"},{"note":"Named export, not default. Default export is the compiler object itself.","wrong":"import compiler from 'vue-template-compiler'; compiler.compileToFunctions(template)","symbol":"compileToFunctions","correct":"import { compileToFunctions } from 'vue-template-compiler'"},{"note":"Named export for parsing .vue files. Available since v2.0.","wrong":"const parseComponent = require('vue-template-compiler').parseComponent;","symbol":"parseComponent","correct":"import { parseComponent } from 'vue-template-compiler'"}],"quickstart":{"code":"import { compile, parseComponent } from 'vue-template-compiler';\nimport * as fs from 'fs';\n\nconst template = '<div>{{ message }}</div>';\nconst compiled = compile(template, {\n  preserveWhitespace: false\n});\nconsole.log('Render function:', compiled.render);\nconsole.log('Static render fns:', compiled.staticRenderFns);\nconsole.log('Errors:', compiled.errors);\n\n// Parse a .vue file\nconst source = fs.readFileSync('component.vue', 'utf8');\nconst descriptor = parseComponent(source, { pad: 'line' });\nconsole.log('Template:', descriptor.template?.content);\nconsole.log('Script:', descriptor.script?.content);\nconsole.log('Styles:', descriptor.styles?.length);","lang":"typescript","description":"Compiles a Vue 2 template string to render functions and parses a .vue SFC file."},"warnings":[{"fix":"Migrate to Vue 3 and use @vue/compiler-sfc.","message":"Vue 2 reached End of Life on December 31, 2023. This package will not receive updates.","severity":"deprecated","affected_versions":">=2.0.0"},{"fix":"Use compileToFunctions() which returns Function objects, or wrap render code in a non-strict function.","message":"compile() returns render code using 'with' statement, which is forbidden in strict mode and will throw in ES modules or TypeScript with strict mode.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Use pre-compiled render functions via compile() if CSP is required.","message":"compileToFunctions() uses new Function() and is not CSP-compliant.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Avoid custom compile modules; use standard build tools.","message":"Options like 'modules' and 'directives' are undocumented and may change; custom modules break compatibility with vue-loader/vueify.","severity":"deprecated","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Use named import: import { compile } from 'vue-template-compiler'","cause":"Using default import when package exports named functions.","error":"TypeError: compiler.compile is not a function"},{"fix":"Wrap render function in a non-strict function or use compileToFunctions()","cause":"Using compiled render code in strict mode context.","error":"SyntaxError: With statement in strict mode"},{"fix":"Run npm install vue-template-compiler","cause":"Package not installed or wrong import path.","error":"Cannot find module 'vue-template-compiler'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}