Weex Vue Framework

Common errors

• Vue is not defined

  cause The Weex environment or its build process failed to correctly provide or register the Vue 2 framework.
  fix Ensure your entry file includes the `// { "framework": "Vue" }` comment or `"use weex:vue";` directive prologue at the very top, depending on your Weex SDK version. Verify that Weex-related build tools (e.g., `weex-toolkit`, `weex-loader`) are correctly installed and configured.

• Failed to compile template: ... Templates should be pre-compiled into render functions.

  cause Attempting to use the `template` option in a Vue component within a Weex environment that is using a runtime-only build of Vue 2.
  fix Ensure all Vue components are defined as Single File Components (`.vue` files) and that your build process (e.g., Webpack with `weex-loader`) is correctly configured to pre-compile these templates into `render` functions. Do not use inline templates or `Vue.compile` in your runtime code.

• Error: Weex module 'xxx' not found.

  cause Attempting to use a Weex native module (`weex.requireModule('xxx')`) that is not correctly implemented or registered in the native environment (iOS/Android).
  fix Verify that the native module 'xxx' is properly implemented and registered within your Android and iOS Weex projects. Check for case sensitivity or naming mismatches. Ensure your Weex SDK version supports the module or that any custom native modules are linked correctly.

• EOL/Obsolete Software: Vue 2 Detected.

  cause This warning is issued by package managers (like npm) when they detect that your project depends on Vue 2, which has officially reached its End of Life.
  fix This is a warning, not an error preventing compilation. The official fix is to migrate your project to Vue 3. If migration is not immediately feasible, you can explore Vue 2 Never-Ending Support (NES) from HeroDevs for continued security updates, or suppress the warning at your own risk.

Warnings

• breaking Vue 2, which this framework supports, reached its End of Life (EOL) on December 31st, 2023. This means it no longer receives official updates, bug fixes, or security patches, which can lead to critical security vulnerabilities and compatibility issues with newer platforms or browsers.
  Fix: Migrate your application to Vue 3 or consider purchasing Never-Ending Support (NES) for Vue 2 from HeroDevs to receive ongoing security patches and compatibility fixes.
• gotcha This package is listed as "auto-generated" and is deeply integrated into the Weex platform's rendering pipeline. Direct usage, updates, or troubleshooting might require specific knowledge of the Weex build system and its internal handling of Vue.
  Fix: Consult the official Weex documentation and Vue 2 Weex integration guides for best practices on project setup and dependency management. Avoid trying to update or manage this package as a standalone Vue library unless explicitly directed by Weex documentation.
• deprecated New feature development and official maintenance for this Vue 2 framework are effectively halted due to Vue 2's EOL. Relying on it for new projects or expecting new capabilities is not advisable.
  Fix: For new Weex projects, explore if Weex officially supports Vue 3 or alternative modern frameworks. For existing projects, plan for a migration or assess the risks of continuing with an unmaintained framework.
• gotcha Weex often utilizes a 'runtime-only' build of Vue 2 for performance, which means component templates must be pre-compiled during the build process (e.g., using `weex-loader`). Attempting to use the `template` option or `Vue.compile` at runtime will fail.
  Fix: Always use single-file components (`.vue` files) and ensure your Weex build setup includes a template compiler (like `weex-loader`) that transforms templates into render functions before deployment. Define components using `render` functions directly if not using SFCs.

Install

• npm install weex-vue-framework npm
• yarn add weex-vue-framework yarn
• pnpm add weex-vue-framework pnpm

Imports

• Vue
  wrong:

  const Vue = require('weex-vue-framework')

  correct:

  import Vue from 'weex-vue-framework'

  While users typically import `Vue` from the generic 'vue' package, in a configured Weex environment, this specific framework is designed to provide the Vue 2 runtime. This import represents accessing the Weex-adapted Vue constructor. For legacy CJS environments in Weex, `require('weex-vue-framework')` might directly yield the Vue instance.
• init
  wrong:

  import init from 'weex-vue-framework/init'

  correct:

  import { init } from 'weex-vue-framework'

  Hypothetically, this framework might expose an `init` function to explicitly configure or bootstrap the Vue environment within Weex, similar to how other rendering layers are initialized. This pattern is common in framework extensions that need a setup step. Weex itself might internally call such an `init`.
• registerComponent
  wrong:

  import { component } from 'weex-vue-framework'

  correct:

  import { registerComponent } from 'weex-vue-framework'

  Weex documentation often refers to `weex.registerComponent` for extending built-in components. If `weex-vue-framework` is a module, it might export such a utility directly for registering Weex-specific components or enhancing the Vue component registration for native rendering.

Quickstart

This quickstart demonstrates a basic Vue 2 Single File Component (SFC) designed for a Weex environment. It shows a simple counter with reactive data and a method to update it, along with Weex-specific styling considerations like explicit dimensions. The `main.js` illustrates the entry point, including the Weex framework annotation and the instantiation of the Vue root component. This setup assumes `weex-vue-framework` is providing the underlying Vue 2 runtime when `import Vue from 'vue'` is called within a Weex project context.

/* file: src/App.vue */
<template>
  <div class="wrapper">
    <text class="message">Hello Weex with Vue 2!</text>
    <text class="counter">Count: {{ count }}</text>
    <button @click="increment" class="button">
      <text class="button-text">Increment</text>
    </button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      count: 0
    }
  },
  methods: {
    increment () {
      this.count++
      console.log('Count incremented to:', this.count)
    }
  }
}
</script>

<style scoped>
  .wrapper {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 800px; /* Weex requires explicit dimensions */
    background-color: #f0f0f0;
  }
  .message {
    font-size: 48px;
    text-align: center;
    margin-bottom: 30px;
    color: #333;
  }
  .counter {
    font-size: 36px;
    color: #666;
    margin-bottom: 40px;
  }
  .button {
    background-color: #42b983;
    padding: 20px 40px;
    border-radius: 10px;
  }
  .button-text {
    color: #ffffff;
    font-size: 32px;
  }
</style>

/* file: src/main.js - entry file for Weex build */
// The 'use weex:vue' directive is crucial for Weex to identify the framework.
// { "framework": "Vue" } // Alternative for Weex v0.16 and earlier

import Vue from 'vue'; // In a Weex project, this resolves to the Weex-adapted Vue runtime
import App from './App.vue';

// Weex requires the root element to be specified for the Vue instance.
// The #root element is typically provided by the Weex rendering environment.
new Vue({
  el: '#root',
  render: h => h(App)
});

// This example assumes a build process using weex-loader or similar,
// which bundles the .vue file into a JavaScript bundle for native Weex rendering.
// You would typically run 'weex create myapp' and then build/run the project.
// e.g., 'npm run build' and 'weex run android' or 'weex run ios'.