How to create a mobile app with Vue Native

Creating a mobile application using Vue Native is an effective way to achieve cross-platform development using Vue.js syntax combined with React Native; 2. First configure the development environment, install Node.js and Expo CLI, and create a project through the command npx create-react-native-app my-vue-app --template vue-native; 3. Enter the project directory and run npm start, scan the QR code through the Expo Go application to preview it on the mobile device; 4. Write .vue file components, use <template>, <script> and <style> structures, pay attention to lowercase React Native components such as view, text and button; 5. The style uses CSS-like writing but is limited to React Native's StyleSheet Model, only some Flexbox features are supported; 6. Event binding uses @on-event name syntax, such as @on-press instead of @click; 7. Form elements such as input boxes need to be manually bound, because there is no default v-model support; 8. Navigation can be implemented through integrated React Navigation, and its API needs to be called in the Vue component, or a community routing scheme is used; 9. After development is completed, use npx expo build:android or npx expo build:ios to generate production versions and publish them to the application store according to the Expo guide; 10. If you need to customize native modules, you can enter the naked workflow without Expo hosting mode, but the complexity is increased; in short, Vue Native is suitable for developers familiar with Vue to quickly build lightweight cross-platform applications, and its core is React Native, some Vue has limited functionality but is syntax-friendly, it is recommended to start with Expo templates for efficient iteration.

Creating a mobile app with Vue Native is a solid choice if you want to build cross-platform apps using Vue.js syntax and React Native under the hood. Vue Native lets you write Vue-style code while compiling it into native mobile components via React Native. Here's a practical guide to get you started.

Set Up Your Development Environment

Before you start coding, make sure your system is ready for React Native development, since Vue Native relies on it.

1. Install Node.js and npm
   Make sure you have Node.js (v14 or higher) installed. You can check with:

   

    node -v

2. Install Expo CLI (Recommended)
   Expo simplifies React Native setup and testing:

    npm install -g @expo/cli

3. Install Vue Native CLI
   Although the original vue-native-cli is no longer actively maintained, the recommended way now is to use the Vue Native Expo template :

   

    npx create-react-native-app my-vue-app --template vue-native

4. Navigate to Project and Start

    cd my-vue-app
   npm start

This will launch the Expo dev server. You can scan the QR code with the Expo Go app on your iOS or Android device to see your app.

Write Your First Vue Native Component

Vue Native uses .vue files with <template> , <script> , and optional <style> sections.

Example: App.vue

 <template>
  <view class="container">
    <text class="title">Hello from Vue Native!</text>
    <button title="Press Me" @on-press="handlePress" />
  </view>
</template>

<script>
export default {
  methods: {
    handlePress() {
      alert("Button pressed!");
    }
  }
}
</script>

<style>
.container {
  flex: 1;
  justify-content: center;
  align-items: center;
  background-color: #f0f0f0;
}

.title {
  font-size: 24;
  color: #333;
  margin-bottom: 20;
}
</style>

Note: Vue Native uses React Native components (like view , text , button ) in lowercase. Styling uses JavaScript objects, but in .vue files, you can write CSS-like rules.

Key Differences from Web Vue

Since Vue Native runs on React Native, there are important differences:

• No HTML elements : Use React Native components ( view , text , image , scroll-view , etc.)
• Styleling is limited to React Native's StyleSheet model : No full CSS. Flexbox works, but things like float , position: absolute have limitations.
• Event binding uses @on-eventname : eg, @on-press instead of @click
• No v-model by default : You'll need to manually bind values ​​using v-bind and event handlers

Example of input binding:

 <template>
  <view class="container">
    <text>{{ message }}</text>
    <text-input
      :value="inputText"
      @on-change-text="inputText = $event"
      placeholder="Type something"
      class="input"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      inputText: ""
    };
  },
  computed: {
    message() {
      return this.inputText || "No input yet";
    }
  }
}
</script>

Add Navigation

Vue Native works with React Navigation. You can set up navigation using the standard React Navigation setup, but call it from Vue components.

1. Install dependencies:

    npm install @react-navigation/native @react-navigation/stack
   npm install react-native-screens react-native-safe-area-context

2. Create navigation containers in your main app file (may require some React syntax if mixing with Vue).

Alternatively, use Vue Native Router (community package) or manage routing manually with state and conditional rendering for simple apps.

Build and Deploy

Once your app is ready:

1. Test on device using Expo Go during development.
2. Create a production build :

    npx expo build:android
   npx expo build:ios

3. Follow Expo's guide to publish or submit to app stores.

Note: If you need custom native modules, you may need to eject from Expo (use the bare workflow), which adds complexity.

Creating a mobile app with Vue Native is straightforward if you already know Vue. It's not as mature as React Native or NativeScript-Vue, but it's a viable option for lightweight cross-platform apps using familiar syntax. Just remember: under the hood, it's React Native, so some Vue features are adapted or limited.

Basically, start with the Expo template, use Vue-style syntax with React Native components, and leverage Expo for fast iteration. That's the fastest path to a working app.

The above is the detailed content of How to create a mobile app with Vue Native. For more information, please follow other related articles on the PHP Chinese website!