# weex-vue-render
> Web renderer for weex project written in Vue DSL.
Latest version **1.0.36** (published 2018-12-29) · Apache-2.0 license · 0 weekly downloads
## Install
```sh
npm install weex-vue-render
pnpm add weex-vue-render
yarn add weex-vue-render
bun add weex-vue-render
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.0.36 |
| Published | 2018-12-29 |
| First published | 2016-12-20 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 2.3 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | fkysly, hanks, imyzf, mr.raindrop |
| Keywords | weex, vue, web, h5-render, web-render, renderer, weex-vue, weex-vue-render, weex-web, weex-h5, next |
## Links
- npm: https://www.npmjs.com/package/weex-vue-render
- Repository: https://github.com/weexteam/weex-vue-render
- Issues: https://github.com/weexteam/weex-vue-render/issues
- npm.io page: https://npm.io/package/weex-vue-render
## Alternatives
- [@opentelemetry/exporter-zipkin](https://npm.io/package/@opentelemetry/exporter-zipkin.md) — 14.8M weekly downloads
- [pusher-js](https://npm.io/package/pusher-js.md) — 2.0M weekly downloads
- [browserify](https://npm.io/package/browserify.md) — 1.7M weekly downloads
- [sqs-consumer](https://npm.io/package/sqs-consumer.md) — 1.7M weekly downloads
- [@sanity/eventsource](https://npm.io/package/@sanity/eventsource.md) — 930.8K weekly downloads
## Recent versions
- 1.0.36 (latest) — 2018-12-29
- 1.0.7 (beta) — 2017-12-14
- 1.0.35 — 2018-12-29
- 1.0.34 — 2018-12-18
- 0.12.32 — 2018-10-18
- 0.12.31 — 2018-10-17
- 0.12.30 — 2018-10-17
- 0.12.29 — 2018-10-17
- 1.0.33 — 2018-10-10
- 1.0.32 — 2018-10-09
- 0.12.28 — 2018-09-30
- 1.0.31 — 2018-09-17
- 1.0.30 — 2018-08-24
- 1.0.29 — 2018-08-21
- 1.0.28 — 2018-07-31
- … 129 more at https://npm.io/package/weex-vue-render/versions
## README
# weex-vue-render
Web renderer for weex project. Support Vue 2.x syntax.
[](https://travis-ci.org/weexteam/weex-vue-render)
[](https://img.shields.io/badge/vue-2.x-brightgreen.svg)
[](https://npmjs.com/package/weex-vue-render)
[](https://npmjs.com/package/weex-vue-render)
[](http://packagequality.com/#?package=weex-vue-render)
## How To Use
We strongly suggest you use v1.x instead of 0.12.x, according to performance issue.
```shell
npm install weex-vue-render
```
```javascript
// import vue runtime.
const Vue = require('vue/dist/vue.runtime.common').default
// import weex-vue-render
const weex = require('weex-vue-render')
// init the weex instance.
weex.init(Vue)
// import your .vue App.
const App = require('App.vue')
// must have a '#root' element in your html body.
App.$el = '#root'
// instantiate
new App()
```
> The way to require ES modules and CommonJS modules may have a slice of difference between different versions of Vue and Vue-loader, and this is totally depending on Vue and the loader, so please check out related documents.
> If your import the UMD formated bundle to the html, then you dont't have to call `init` manually.
```html
```
### pack your .vue file to web.bundle.js
> You should pack your web.bundle.js and native.bundle.js separately. Use weex-loader for native packing and use vue-loader for web packing.
Use [vue-loader](https://github.com/vuejs/vue-loader) to pack your code for web.bundle.js.
If you are using weex-vue-render@**1.x** , You should definitely use below plugins to get things work:
* weex-vue-precompiler
* autoprefixer
* postcss-plugin-weex
* postcss-plugin-px2rem
> We use weex-vue-precompiler instead of `$processStyle` in 1.x verison.
Now, how to use this plugins to pack you web.bundle.js ? We use them in the vue-loader option.
Here is a vue-loader option example:
```javascript
{ // webpack config.
vue: {
optimizeSSR: false,
postcss: [
// to convert weex exclusive styles.
require('postcss-plugin-weex')(),
require('autoprefixer')({
browsers: ['> 0.1%', 'ios >= 8', 'not ie < 12']
}),
require('postcss-plugin-px2rem')({
// base on 750px standard.
rootValue: 75,
// to leave 1px alone.
minPixelValue: 1.01
})
],
compilerModules: [
{
postTransformNode: el => {
// to convert vnode for weex components.
require('weex-vue-precompiler')()(el)
}
}
]
}
}
```
> You should use a .js file as your webpack entry, not the Main.vue or App.vue file.
The content of your entry file `main.js` should be like this:
```javascript
// import Vue runtime if you like.
// import weex-vue-render if you like.
// init weex if you imported it.
// at least it should have this:
import App from './your/App.vue'
App.el = '#root'
new Vue(App)
```
## How to Migrate from 0.12.x to 1.x
> Why should I update to 1.x ?
The answer is **enoumouse change in rendering performance** with a few minor updates in your code is definitely worth to try.
### packing configuration
You should use the previous mentioned plugins in your vue-loader configuration.
### check your code
| category | rules | 0.12.x | 1.x |
| --- | ---- | ------ | ----- |
| **render function** | create weex component in render function | support | supported in **>=1.0.11** |
| **event binding** | bind native events for custom component's root element | `@click` | `@click.native` [doc](https://vuejs.org/v2/guide/components.html#Binding-Native-Events-to-Components) |
| **styles** | style binding | none | better performance for binding object literal like `:style="{width:w,height:h}"` instead of object variable like `:style="someObj"` |
| | styles in `animation.transition` | none | should add css prefix manualy if needed. We suggest you use [transition](https://weex-project.io/references/common-style.html#transition-v0-16-0) to implement animation. |
| **exclusive styles** | limit | none | wirte them in `