This site is built with hexo. Site content is written in Markdown format located in src
. Pull requests welcome!
$ npm install
$ npm start # dev server at http://localhost:4000
$ npm run build
The website of Vue Native
Home Page: http://vue-native.io
License: MIT License
This site is built with hexo. Site content is written in Markdown format located in src
. Pull requests welcome!
$ npm install
$ npm start # dev server at http://localhost:4000
$ npm run build
Following the instructions on this page to create a new project using the vue-native init <projectName>
command, the new project was not created. This was attempted on a Windows 10 machine which has Expo CLI and Vue Native CLI installed. Below is what was entered in the Git Bash terminal along with the result. The new project was to be named helloWorld
but nothing was created in the destination folder. What needs to be changed for the project to be created?
jason.black@MARIGOLD MINGW64 /z/files/development/vue_native/code/sandbox
$ vue-native init helloWorld
Using globally installed expo-cli 3.7.1
Creating Vue Native project helloWorld
- Creating project with expo-cli
[18:28:18] --name: argument is required in non-interactive mode.
√ Created project with expo-cli
(node:14736) UnhandledPromiseRejectionWarning: Error: ENOENT: no such file or directory, chdir 'Z:\files\development\vue_native\code\sandbox' -> 'helloWorld'
at process.chdir (internal/process/main_thread_only.js:29:13)
at installPackages (C:\Users\jason.black\AppData\Roaming\npm\node_modules\vue-native-cli\src\index.js:182:11)
at createExpoProject (C:\Users\jason.black\AppData\Roaming\npm\node_modules\vue-native-cli\src\index.js:123:3)
at init (C:\Users\jason.black\AppData\Roaming\npm\node_modules\vue-native-cli\src\index.js:101:5)
at Command.<anonymous> (C:\Users\jason.black\AppData\Roaming\npm\node_modules\vue-native-cli\src\index.js:69:7)
at Command.listener (C:\Users\jason.black\AppData\Roaming\npm\node_modules\vue-native-cli\node_modules\commander\index.js:315:8)
at Command.emit (events.js:210:5)
at Command.parseArgs (C:\Users\jason.black\AppData\Roaming\npm\node_modules\vue-native-cli\node_modules\commander\index.js:651:12)
at Command.parse (C:\Users\jason.black\AppData\Roaming\npm\node_modules\vue-native-cli\node_modules\commander\index.js:474:21)
at Object.<anonymous> (C:\Users\jason.black\AppData\Roaming\npm\node_modules\vue-native-cli\src\index.js:81:9)
(node:14736) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:14736) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
node npm版本都是最新的,按照步骤安装至vue-native init 报错:
Error: ENOENT: no such file or directory, uv_chdir
Is this possible? You can also use VuePress for documentation!
this code not working
<template>
<view style = {styles.container}>
<switch
:on-value-change = "handleChange"
:value = "value"/>
</view>
</template>
<script> export default { data: function() { return { value: false } }, methods: { handleChange: () => { this.value = !this.value } } } </script>
I have figured this out myself, but the documentation needs to be updated.
The documentation states:
At this point you will need to manually change the app.json that has been generated inside the new project directory. To make the packager recognize .vue files, a sourceExts field under packagerOpts.
{
"expo": {
"name": "Your app's name",
"platforms": [
"ios",
"android",
"web"
],
"version": "1.0.0",
...
"packagerOpts": {
"sourceExts": ["js", "json", "ts", "tsx", "vue"],
"config": "metro.config.js"
}
}
}
It then goes on to say:
Remove the Content of the
App.js
file and renameApp.js
file withApp.vue
.
This is misleading and backwards. Let's describe how the system actually works.
The sourceExts
property in App.json
is order-sensitive. You need to put the "vue"
entry at the start of the list like this:
"sourceExts": ["vue", "js", "json", "ts", "tsx"],
Then, don't do some crazy delete content rename file bs. Just delete App.js. App.vue
already exists by default in the initial installation - create it if necessary.
You may need to restart the Metro server process (in your shell, ctrl+c to exit the program, then npm start
again). And bam, up comes the vue app.
Devs please update your docs - there appears to be a lot of out of date information. Also please run through your vue-native init
function - right now it installs a react-native app by default and doesn't consider the vue file that is included in the install.
Hi , I am looking for some examples of how to use the react native elements directly inside vue-native code. For example I would like to use the DatePicker .
The documentation has no examples of how to embed react-native elements inside vue-native. This would help massively for all such components.
Also, could I ask if it is possible to add the DatePicker into vue-native as it is such an important component for any form input.
Packages:
} else if (status.granted) {
this.location = location1.coords;
// add <text>{{ location }}</text> to template
OR
this.lng = location.coords.longitude
// requires adding lng to data
Revised code example
Vue-native-geolocation
General Notes
Please review and comment. I can attempt PR if accepted
I am following the docs and I am on conditional part.
<view>
<text v-if="seen">Now you see me</text>
<button :on-press="seen = !seen">Click to Toggle</button>
</view>
when i paste this into my code i get the error of:
Invariant Violation: The title prop of a Button must be a string
so i wrote a v-bind:title="something" and set that in the data but then i get the error of
console.error: "[Vue warn]: You may have an infinite update loop in a component render function (found in <Anonymous>)"
I do something wrong or the docs are outdated?
At this point you will need to manually change the app.json that has been generated inside the new project directory. To make the packager recognize .vue files, a sourceExts field under packagerOpts.
This information is out of date.
After implement the WebView is nothing display.
On this page of the Vue Native Getting Started guide the instructions are to create a .vue file and copy/paste the lines of code below.
In a newly created hello-world project I created a new file called test.vue and copied/pasted the code into it, as per the instructions. This file is currently stored at the same level in the project's file structure as App.vue, app.json etc. However, when the hello-world app is refreshed on my phone, it still shows the content that project's App.vue file.
Can more specific instructions be given as to what the new .vue file should be named, where it should be placed in the project's file structure and any other pertinent details to get it to display on the phone?
When I tried to run the code, It gave me this error
Creating_ react native app vueNative project
Create react-native vueNative project
/usr/local/lib/node_modules/vue-native-cli/src/index.js:140
process.chdir(projectName);
^
Error: ENOENT: no such file or directory, chdir 'vueNative'
at handleAndAddVueNativePackageDependencySync (/usr/local/lib/node_modules/vue-native-cli/src/index.js:140:11)
at createNormalNativeApp (/usr/local/lib/node_modules/vue-native-cli/src/index.js:90:3)
at init (/usr/local/lib/node_modules/vue-native-cli/src/index.js:78:7)
at Command.<anonymous> (/usr/local/lib/node_modules/vue-native-cli/src/index.js:59:7)
at Command.listener (/usr/local/lib/node_modules/vue-native-cli/node_modules/commander/index.js:315:8)
at Command.emit (events.js:182:13)
at Command.parseArgs (/usr/local/lib/node_modules/vue-native-cli/node_modules/commander/index.js:651:12)
at Command.parse (/usr/local/lib/node_modules/vue-native-cli/node_modules/commander/index.js:474:21)
at Object.<anonymous> (/usr/local/lib/node_modules/vue-native-cli/src/index.js:63:9)
at Module._compile (internal/modules/cjs/loader.js:702:30)
i`ve got an issue when i was trying to use vue-native-router. In api you ask to install these modules to use it:
npm install -g react-native-reanimated react-native-gesture-handler react-native-paper
But there is react-native-screens
is also needed
when I was going to install vue native app and after wrote vue-native init APP-NAME, I was told to install expo-cli then I write "Y" but it was really slow then stopped so I install expo-cli first then install vue app and it worked,
so the issue is expo-cli installation in vue-native installation not working for me,
thanks
There's no mention on sending SMS at
https://vue-native.io/docs/device-apis.html
Would you please mention either how to do it, or say it's not possible?
Thanks
$emit is now functional. This section needs to be removed:
https://vue-native.io/docs/FAQ.html#Support-for-emit-for-communication-from-child-to-parent
Hi,
I just happened on this new repo while browsing the native base repos for starter template (wanted something without typescript and mobx to use with vue-react, so i could write my web and mobile apps with vue). Is this an indication of something in the offing for vue with respect to nativebase ?
This repository is not of vuejs.org
So, README.md should be rewriten to document of vue-native.io
Looks like the cli tool is now generating the app.json
file correctly, so the note section here can be removed: https://vue-native.io/docs/installation.html#For-Expo-users
That is, this section:
If you end up copying that "sourceExts" line verbatim from the docs (w/o removing the last ,
) you end up getting this error:
INFO
14:42
Starting Metro Bundler on port 19001.
INFO
14:42
Opening exp://127.0.0.1:19000 in iOS simulator
INFO
14:42
Tunnel ready.
ERROR
14:42
node_modules/expo/AppEntry.js: "" is not a valid identifer name
ERROR
14:42
Building JavaScript bundle: error
Just posting it here for searchability in case someone experience the same issue :-)
Hi,
How can i use .env ? I need to make global variable for my project
Have nice day,
I tried to display image in my vue-native App, and maybe found a mistake in this document.
vue-native-website/src/docs/basic-components.md
Lines 35 to 44 in 9949168
I got SyntaxError from this part.
<image
:source="{require('/vue-native/img/favicon.png')}"
/>
Removing {
and }
solved the error.
<image
:source="require('/vue-native/img/favicon.png')"
/>
here my package.json
{
"name": "empty-project-template",
"main": "node_modules/expo/AppEntry.js",
"private": true,
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"eject": "expo eject"
},
"dependencies": {
"expo": "^30.0.1",
"react": "16.3.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-30.0.0.tar.gz",
"vue-native-core": "0.0.8",
"vue-native-helper": "0.0.9",
"vue-native-router": "0.0.1-alpha.3"
},
"devDependencies": {
"vue-native-scripts": "0.0.14"
}
}
im using router but i cannot get navigat into my next screen
props is undefined
here my script
<template>
<app-navigation></app-navigation>
</template>
<script>
import { StackNavigator } from "vue-native-router";
import Home from "./src/screens/home.vue";
import Camera from "./src/screens/camera.vue";
const AppNavigation = StackNavigator(
{
Home,Camera
},
{
initialRouteName: 'Home'
}
);
export default {
components: { AppNavigation }
}
</script>
<template>
<view class="container">
<button title="Ambil Foto" :on-press="goToCamera" />
</view>
</template>
<script>
export default {
props: {
navigation: {
type: Object
}
},
methods:{
goToCamera: ()=>{
this.navigation.navigate("Camera");
}
}
};
</script>
error message : undefined is not an object (evaluating '_this.navigation.navigate')
thanks
I would like to use bootstrap-vue
in my new project, this is my first time of trying vue-native
. I can't seem to tell which is the entry
file or root
file from where I could do something like this as instructed on bootstrap-vue
's docs page:
import Vue from "vue";
import BootstrapVue from "bootstrap-vue";
Vue.use(BootstrapVue);
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue/dist/bootstrap-vue.css";
I've also tried importing a custom stylesheet, but this wouldn't work. It throws and unable to resolve
path to the imported file.
Please how may I use bootstrap with a vue-native
project?
Thanks
--no-expo
)A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.