Vue Native Template Compiler

0.3.1 verified Fri May 01 auth: no javascript maintenance

Vue Native template compiler, part of the Vue Native ecosystem that enables Vue.js developers to build native mobile apps using React Native under the hood. The current stable version is 0.3.1, released in 2020. It compiles Vue templates into React Native components at build time. Key differentiators: it allows using Vue syntax (v-if, v-for, etc.) on React Native, and is the core compiler for vue-native-scripts. Alternatives include React Native itself or using Vue with a WebView approach. This package is auto-generated from the vue-native-core monorepo.

Common errors

error Error: Cannot find module 'vue-native-template-compiler' ↓

cause The package is not installed or missing from node_modules.

fix

Run 'npm install vue-native-template-compiler' or add it to package.json.

error Error: Default condition should be last one ↓

cause Export map issue in older Node.js versions (not directly related to this package but occurs with ESM).

fix

Use Node.js 14+ or set 'type': 'module' correctly.

error TypeError: compiler is not a function ↓

cause Wrong import pattern: using named import instead of default import.

fix

Use 'import compiler from "vue-native-template-compiler"' or 'const compiler = require("vue-native-template-compiler")'.

Warnings

breaking Deprecated React Native components (CheckBox, Clipboard, ImageStore, MaskedViewIOS) removed in v0.2.0 and v0.1.0. These components are no longer usable from .vue files unless manually imported. ↓

fix Manually import these components from 'react-native' and register them as Vue components.

deprecated Package is auto-generated and not actively maintained. Last release v0.3.1 (2020). Consider using React Native directly or alternative solutions. ↓

fix Evaluate if Vue Native is still suitable for new projects; consider migrating to React Native or other frameworks.

gotcha Requires peer dependency on specific Vue version (2.2.6). Using a different Vue version may cause compilation errors. ↓

fix Ensure vue@2.2.6 is installed as a dependency.

gotcha Memory leak fixed in v0.1.3. Earlier versions could cause memory overflow due to uncontrolled growth. ↓

fix Upgrade to v0.1.3 or later.

Install

npm install vue-native-template-compiler

yarn add vue-native-template-compiler

pnpm add vue-native-template-compiler

Imports

compiler
wrong
```
const compiler = require('vue-native-template-compiler')
```
correct
```
import compiler from 'vue-native-template-compiler'
```
The package exports a single default function. CommonJS require works in Node.js, but ESM import is preferred for bundlers.
compile
wrong
```
import { compile } from 'vue-native-template-compiler'
```
correct
```
import { compile } from 'vue-template-compiler'
```
The compile function is not exported by vue-native-template-compiler; it is provided by vue-template-compiler. Users often mistakenly try to import compile from this package.

parseComponent

wrong

import { parseComponent } from 'vue-native-template-compiler'

correct

import { parseComponent } from 'vue-template-compiler'

Similarly, parseComponent is from vue-template-compiler, not this package.

Quickstart

Shows how to use the default compiler export to convert a Vue template string into React Native components.

// This package is typically used internally by vue-native-scripts.
// To use directly:
const compiler = require('vue-native-template-compiler');
const template = '<template><View><Text>Hello</Text></View></template>';
const result = compiler(template);
console.log(result); // returns compiled React Native code