vue-template-compiler
Advanced tools
The vue-template-compiler package is used to pre-compile Vue.js templates into render functions to achieve faster render times and smaller bundle sizes. It is typically used in build processes with tools like Webpack or Browserify.
Compile template strings
This feature allows you to compile Vue.js template strings into render functions. The `compile` function returns an object containing the render function as a string, which can be used to render Vue components.
const { compile } = require('vue-template-compiler');
const compiled = compile('<div>{{ message }}</div>');
console.log(compiled.render);Compile template files
This feature is used to parse `.vue` single-file components and extract their template content. The `parseComponent` function returns an object with the template, script, and style parts of the component.
const { parseComponent } = require('vue-template-compiler');
const fs = require('fs');
const source = fs.readFileSync('MyComponent.vue', 'utf-8');
const parsed = parseComponent(source);
console.log(parsed.template.content);This package is a Babel plugin that allows you to use JSX with Vue.js components. It provides an alternative to using the Vue template syntax and offers a different developer experience compared to vue-template-compiler.
Vue-loader is a Webpack loader that allows you to write Vue components in a format called Single-File Components (SFCs). It uses vue-template-compiler under the hood to compile templates but provides additional functionalities like hot-reloading and CSS extraction.
Preact is a fast 3kB alternative to React with the same modern API. While not directly similar to vue-template-compiler, it serves a similar purpose for the Preact ecosystem, allowing developers to compile JSX into render functions.
This package is auto-generated. For pull requests please see src/entries/web-compiler.js.
This package can be used to pre-compile Vue 2.0 templates into render functions to avoid runtime-compilation overhead and CSP restrictions. You will only need it if you are writing build tools with very specific needs. In most cases you should be using vue-loader or vueify instead, both of which use this package internally.
npm install vue-template-compiler
const compiler = require('vue-template-compiler')
Compiles a template string and returns compiled JavaScript code. The returned result is an object of the following format:
{
ast: ?ASTElement, // parsed template elements to AST
render: string, // main render function code
staticRenderFns: Array<string>, // render code for static sub trees, if any
errors: Array<string> // template syntax errors, if any
}
Note the returned function code uses with and thus cannot be used in strict mode code.
It's possible to hook into the compilation process to support custom template features. However, beware that by injecting custom compile-time modules, your templates will not work with other build tools built on standard built-in modules, e.g vue-loader and vueify.
The optional options object can contain the following:
modules
An array of compiler modules. For details on compiler modules, refer to the ModuleOptions type in flow declarations and the built-in modules.
directives
An object where the key is the directive name and the value is a function that transforms an template AST node. For example:
compiler.compile('<div v-test></div>', {
directives: {
test (node, directiveMeta) {
// transform node based on directiveMeta
}
})
By default, a compile-time directive will extract the directive and the directive will not be present at runtime. If you want the directive to also be handled by a runtime definition, return true in the transform function.
Refer to the implementation of some built-in compile-time directives.
preserveWhitespace
Defaults to true. This means the compiled render function respects all the whitespaces between HTML tags. If set to false, all whitespaces between tags will be ignored. This can result in slightly better performance but may affect layout for inline elements.
Similar to compiler.compile, but directly returns instantiated functions:
{
render: Function,
staticRenderFns: Array<Function>
}
This is only useful at runtime with pre-configured builds, so it doesn't accept any compile-time options. In addition, this method uses new Function() so it is not CSP-compliant.
Parse a SFC (single-file component, or *.vue file) into a descriptor (refer to the SFCDescriptor type in flow declarations). This is used in SFC build tools like vue-loader and vueify.
pad: with { pad: true }, the extracted content for each block will be padded with newlines to ensure that the line numbers align with the original file. This is useful when you are piping the extracted content into other pre-processors, as you will get correct line numbers if there are any syntax errors.FAQs
template compiler for Vue 2.0
The npm package vue-template-compiler receives a total of 1,509,004 weekly downloads. As such, vue-template-compiler popularity was classified as popular.
We found that vue-template-compiler demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.
Security News
vlt introduced its new package manager and a serverless registry this week, innovating in a space where npm has stagnated.
Security News
Research
The Socket Research Team uncovered a malicious Python package typosquatting the popular 'fabric' SSH library, silently exfiltrating AWS credentials from unsuspecting developers.