nativescript-vue / nativescript-vue.org

NativeScript-Vue website

NativeScript-Vue website

This is the source for the nativescript-vue.org website.

Contributions are welcome, all the content is placed in the content directory.

How to build the documentation

After cloning the repository, do the following steps

cd nativescript-vue.org/
npm install
npm run build:js
npm run build:css
npm run build

This sequence is only needed the first time. After that, the only command needed is:

npm run build

Serve the documentation

Install the serve npm package globally:

npm install -g serve

Run the HTTP server using the already generated dist/ directory:

serve dist/

Now, you can open the http://localhost:5000 URL in your browser to see the generated docs.

How to build in watch mode

In order to detect changes in the content directory and rebuild automatically the docs, run the following sentence:

npm run dev

nativescript-vue.org's Issues

Update VueRouter docs

From Vladimir Amiorkov via email:

Using the “nativescript-vue-template” proved that I cannot use the VueRouter, which stopped my development of the entire app. Now there is “VueRouter - routing (opt-in) - experimental!!” in the website but that was not there before, I did jump to the “Routing > Vue Router” page which still does not state any experiment tag or not supported.
Suggestion: It would be good if we can recommend something that can be used as “replacement” for the time being while the VueRouter is experimental. To me this sounds like the first time anyone creating a more advanced app with navigation will hit so we should suggest to him what is the “current best option” to implement navigation.

Tasks:

• State that support for Vue Router is experimental more clearly.
• Provide information how to implement navigation without using Vue Router. (Might need to be a separate topic?). (See the Manual Routing article.)

Remove Templates page

In 2.0 we removed the vanilla js template from the Templates page - which now duplicates the contents of the Quick Start guide. We should merge useful info from Templates into Quick Start and then remove the templates page.

We should also look into creating aliases - so if there are any existing links to the template page, it should be redirected to the Quick Start guide instead of a 404.

Move playground tutorial from Quick Start to it's own page

We would like to keep Quick Start short, to make it "Quick" to read, quick to follow etc.

To do that, we should move the Playground tutorial to it's own page, possibly merge it with the currently WIP Playground page.

Created based on #58

vue-devtools installation

from vue-devtools github I read:

Make sure you import devtools before Vue, otherwise it might not work as expected.

But here the opposite was done:

GridLayout height issues on Android 8.0.0 SM-G935F

The recommended code:
<GridLayout columns="2*,*" rows="*" width="100%" height="25%">
doesn't look as it should on my android.
First of all, the TextField and Button looked really thick. It actually did have almost 25% height of the entire screen.
Next, whenever the TextField is tapped, the keyboard is brought up and the height of the TextField and the button is halved.
A fix that worked for me was giving the height an absolute pixel value. eg.
<GridLayout columns="2*,*" rows="*" width="100%" height="400px">

Document event inheritance

Opening due to #213

We don't currently mention how events are inherited from base classes in NativeScript, which leads to confusion around available events for elements.

On individual element docs, we are only listing the events specific to an element (not inherited events), as otherwise the list would be too large and duplicated across a lot of different pages.

Document usage of the Router

I'd be happy to take a stab at documenting usage of vue-router, but I'm not entirely sure where in the menu this should live. Suggestions?

ListPicker Color Divider

I can not change the color of the dividing line.
I try with selectionDivider as follows but not working:

<ListPicker :items="items" v-model="selectedItem" selectionDivider="#fff"/>

Provide information about using .vue files

From Vladimir Amiorkov via email:

There is not clear Guide to tell if using .vue files is supported and if it should be used under NativeScript-Vue. One of the templates allows it (nativescript-vue/vue-cli-template) other does not (nativescript-vue/nativescript-vue-template), why? This makes it very hard to rework your project which at the beginning you may be doing quite often.

Tasks:

• Provide information about using .vue files

Provide practical information in the Templates docs

Based on feedback received from Vladimir Amiorkov via email:

• For each template, provide more practical information such as what you can use it for, what features it illustrates, what architecture could be used with it, etc.

Update ListView page

ListView now requires the height property to work (at least on iOS). We need to update the docs page for that.

Expand v-template component docs with more sample code

From Vladimir Amiorkov via email:

I did not find any resources how template parsing can be achieve (ListView related implementation). I had to looks at the source code to see how/maybe it works for the ListView component. I was not able to make RadListView run.
Suggestion: I did not find the article v-template component while I was working on my task but looking at it is ok but could use some code snippets of example implementation.

Tasks:

• Expand v-template docs with more sample code.

django custom relationship field

helo; supose i've tow models:

class Product(models.Model):
ref= models.CharField(max_length=12, unique=True)
code_prod= models.CharField(max_length=50)
description= models.CharField(max_length=150)

class Detail(models.Model):
ref = models.CharField(max_length=10)
year= models.IntegerField()
code = models.CharField(max_length=10)
month = models.IntegerField()
created_at = models.DateField()

class Meta:
    db_table = 'details'

to make oneToMany relationship on Detail model, we can use ForeignKey. this supose in Detail table there is column named product_id,
i want know if i can use another field for example "ref" to make this relationship ?
also how can i perform this SQL query :
query = "select product.ref, product.description, details.year, details.code from product left join details on details.ref = product.ref where product.code = 'abcd' ; "
thank you very much.

Document `v-view` directive

Moving here from nativescript-vue/nativescript-vue#80

Rethink Quick Start and Installation pages

I feel like the Installation page doesn't really provide any value as it is right now, since all it does is link to the NS docs in all 3 sections.

Originally posted by @rigor789 in #178 (comment)

We might want to look into reworking the Quick Start and the Installation pages. It might make more sense to drop the Installation page in favor of the Quick Start atogether.

Document $showModal, $navigateTo, $navigateBack

We don't currently have these covered in the docs

Cannot read property 'getKeyedTemplates' of undefined

Hi and thank you for this awesome plugin. I have been looking for the examples in the nativescript-vue-template but it seems one is failing.

Running the template app-with-list-view.js crashes the app.

Here is the full exception:

An uncaught Exception occurred on "main" thread.
java.lang.RuntimeException: Unable to start activity ComponentInfo{org.nativescript.myapp/com.tns.NativeScriptActivity}: com.tns.NativeScriptException: 
Calling js method onCreate failed

TypeError: Cannot read property 'getKeyedTemplates' of undefined
File: "file:///data/data/org.nativescript.myapp/files/app/tns_modules/nativescript-vue/dist/index.js, line: 2137, column: 6

StackTrace: 
	Frame: function:'mounted', file:'file:///data/data/org.nativescript.myapp/files/app/tns_modules/nativescript-vue/dist/index.js', line: 10798, column: 22
	Frame: function:'callHook', file:'file:///data/data/org.nativescript.myapp/files/app/tns_modules/nativescript-vue/dist/index.js', line: 3217, column: 21
	Frame: function:'insert', file:'file:///data/data/org.nativescript.myapp/files/app/tns_modules/nativescript-vue/dist/index.js', line: 9681, column: 7
	Frame: function:'invokeInsertHook', file:'file:///data/data/org.nativescript.myapp/files/app/tns_modules/nativescript-vue/dist/index.js', line: 3777, column: 28
	Frame: function:'patch', file:'file:///data/data/org.nativescript.myapp/files/app/tns_modules/nativescript-vue/dist/index.js', line: 3996, column: 5
	Frame: function:'Vue._update', file:'file:///data/data/org.nativescript.myapp/files/app/tns_modules/nativescript-vue/dist/index.js', line: 2959, column: 19
	Frame: function:'updateComponent', file:'file:///data/data/org.nativescript.myapp/files/app/tns_modules/nativescript-vue/dist/index.js', line: 3087, column: 10
	Frame: function:'get', file:'file:///data/data/org.nativescript.myapp/files/app/tns_modules/nativescript-vue/dist/index.js', line: 2132, column: 25
	Frame: function:'Watcher', file:'file:///data/data/org.nativescript.myapp/files/app/tns_modules/nativescript-vue/dist/index.js', line: 2121, column: 12
	Frame: function:'mountComponent', file:'file:///data/data/org.nativescript.myapp/files/app/tns_modules/nativescript-vue/dist/index.js', line: 3094, column: 3
	Frame: function:'create', file:'file:///data/data/org.nativescript.myapp/files/app/tns_modules/nativescript-vue/dist/index.js', line: 11173, column: 9
	Frame: function:'', file:'file:///data/data/org.nativescript.myapp/files/app/tns_modules/tns-core-modules/ui/frame/frame-common.js', line: 51, column: 22
	Frame: function:'', file:'file:///data/data/org.nativescript.myapp/files/app/tns_modules/tns-core-modules/ui/frame/frame-common.js', line: 101, column: 16
	Frame: function:'FrameBase.navigate', file:'file:///data/data/org.nativescript.myapp/files/app/tns_modules/tns-core-modules/ui/frame/frame-common.js', line: 213, column: 28
	Frame: function:'ActivityCallbacksImplementation.onCreate', file:'file:///data/data/org.nativescript.myapp/files/app/tns_modules/tns-core-modules/ui/frame/frame.js', line: 615, column: 19
	Frame: function:'NativeScriptActivity.onCreate', file:'file:///data/data/org.nativescript.myapp/files/app/tns_modules/tns-core-modules/ui/frame/activity.js', line: 20, column: 25


	at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2665)
	at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2726)
	at android.app.ActivityThread.-wrap12(ActivityThread.java)
	at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1477)
	at android.os.Handler.dispatchMessage(Handler.java:102)
	at android.os.Looper.loop(Looper.java:154)
	at android.app.ActivityThread.main(ActivityThread.java:6119)
	at java.lang.reflect.Method.invoke(Native Method)
	at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:886)
	at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:776)
Caused by: com.tns.NativeScriptException: 
Calling js method onCreate failed

TypeError: Cannot read property 'getKeyedTemplates' of undefined
File: "file:///data/data/org.nativescript.myapp/files/app/tns_modules/nativescript-vue/dist/index.js, line: 2137, column: 6

StackTrace: 
	Frame: function:'mounted', file:'file:///data/data/org.nativescript.myapp/files/app/tns_modules/nativescript-vue/dist/index.js', line: 10798, column: 22
	Frame: function:'callHook', file:'file:///data/data/org.nativescript.myapp/files/app/tns_modules/nativescript-vue/dist/index.js', line: 3217, column: 21
	Frame: function:'insert', file:'file:///data/data/org.nativescript.myapp/files/app/tns_modules/nativescript-vue/dist/index.js', line: 9681, column: 7
	Frame: function:'invokeInsertHook', file:'file:///data/data/org.nativescript.myapp/files/app/tns_modules/nativescript-vue/dist/index.js', line: 3777, column: 28
	Frame: function:'patch', file:'file:///data/data/org.nativescript.myapp/files/app/tns_modules/nativescript-vue/dist/index.js', line: 3996, column: 5
	Frame: function:'Vue._update', file:'file:///data/data/org.nativescript.myapp/files/app/tns_modules/nativescript-vue/dist/index.js', line: 2959, column: 19
	Frame: function:'updateComponent', file:'file:///data/data/org.nativescript.myapp/files/app/tns_modules/nativescript-vue/dist/index.js', line: 3087, column: 10
	Frame: function:'get', file:'file:///data/data/org.nativescript.myapp/files/app/tns_modules/nativescript-vue/dist/index.js', line: 2132, column: 25
	Frame: function:'Watcher', file:'file:///data/data/org.nativescript.myapp/files/app/tns_modules/nativescript-vue/dist/index.js', line: 2121, column: 12
	Frame: function:'mountComponent', file:'file:///data/data/org.nativescript.myapp/files/app/tns_modules/nativescript-vue/dist/index.js', line: 3094, column: 3
	Frame: function:'create', file:'file:///data/data/org.nativescript.myapp/files/app/tns_modules/nativescript-vue/dist/index.js', line: 11173, column: 9
	Frame: function:'', file:'file:///data/data/org.nativescript.myapp/files/app/tns_modules/tns-core-modules/ui/frame/frame-common.js', line: 51, column: 22
	Frame: function:'', file:'file:///data/data/org.nativescript.myapp/files/app/tns_modules/tns-core-modules/ui/frame/frame-common.js', line: 101, column: 16
	Frame: function:'FrameBase.navigate', file:'file:///data/data/org.nativescript.myapp/files/app/tns_modules/tns-core-modules/ui/frame/frame-common.js', line: 213, column: 28
	Frame: function:'ActivityCallbacksImplementation.onCreate', file:'file:///data/data/org.nativescript.myapp/files/app/tns_modules/tns-core-modules/ui/frame/frame.js', line: 615, column: 19
	Frame: function:'NativeScriptActivity.onCreate', file:'file:///data/data/org.nativescript.myapp/files/app/tns_modules/tns-core-modules/ui/frame/activity.js', line: 20, column: 25


	at com.tns.Runtime.callJSMethodNative(Native Method)
	at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1088)
	at com.tns.Runtime.callJSMethodImpl(Runtime.java:970)
	at com.tns.Runtime.callJSMethod(Runtime.java:957)
	at com.tns.Runtime.callJSMethod(Runtime.java:941)
	at com.tns.Runtime.callJSMethod(Runtime.java:933)
	at com.tns.NativeScriptActivity.onCreate(NativeScriptActivity.java:13)
	at android.app.Activity.performCreate(Activity.java:6679)
	at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1118)
	at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2618)
	... 9 more

Document common gotchas

I have started working on a little explanation why some lifecycle hooks don't work the way users expect, and why sometimes we need to add a setTimeout and such. We should add this and other gotchas that we see often to the docs.

Note: this is a draft, could use some better wording and polishing...

---

Why lifecycle hooks don't always work in NativeScript-Vue

It is very common to run into issues when calling certain functions from Vue lifecycle hooks when working with NativeScript-Vue. For example, I see the following case fairly often:

created() {
  alert('I have been created!')
}

Which never shows an alert, and leads to the conclusion that the lifecycle function created is never called.

This is not the case actually, the hook is called the same way it is called when working with Vue on web, but there are certain limitations that come into play. In this example when the hook is called the application has not been fully started yet, and calls to alert are simply ignored by NativeScript.

To understand why this may be happening, we need to look into how NativeScript actually works compared to web. On web DOM manipulation (creating elements, adding/removing children etc.) is synchronous, which means that in our code we can manipulate the dom without worrying about callbacks/promises to ensure the update has been made. The asynchronous part - paint is handled by the browser and we don't need to worry about it too much in our code.

In NativeScript(-Vue) when a View is created and added to the "DOM" it may take some time for it to actually be there because it's handled by the native layer and it is asynchronous. To ensure the view is in the view hierarchy we can utilize the loaded event on any view, which is fired when the underlying native view is created and ready.

In the above example, the alert may show up if the created hook is used on a component that is only added to the "DOM" at a later point (with a v-if for example), but will not do anything if used on a component that is rendered initially when the app starts. This is because the code behind alert uses foregroundActivity which is not yet created when the Vue app is initialized, it's only created once all the views are rendered (async).

https://github.com/NativeScript/NativeScript/blob/8e9c6d5f321ca8b4fe57ab4e456f74ecfa3a7185/tns-core-modules/ui/dialogs/dialogs.android.ts#L15

Mobile image on home page

Hello,

Seems like the top of mobile is larger than the bottom

Fix blog order

Right now the order of the blog posts is "random" and can change from build-to-build. We want to have it ordered by most recent first, and we have set that up in the build file, but for some reason the order still varies.

Unable to pass props to custom component inside a <Listview />

Here is my code

 <ListView for="listDetail in listDetails" style="height: 850px">
                <v-template>
                    <FlexboxLayout flexDirection="column" class="list-group-item">
                    	<ListComponent :listData="listDetail", :listJsonData="listJsonData", :listIndex="index" />
                    </FlexLayout>
                </v-template>            
            </ListView> 

listData(object), listJsonData(array), listIndex(number) are ListComponent props.
listDetails(array of objects), listJsonData(Object) are data of the parent class.
In ListComponent listData value becomes default instead of object.

Search is broken on the site

Title pretty much says it all. In console I see:

vue.js:584 [Vue warn]: Error in mounted hook: "Error: Error: inputSelector:[object HTMLInputElement]  must be a string. Each selector must match only one element and separated by ','"

(found in <Root>)
warn @ vue.js:584
logError @ vue.js:1715
globalHandleError @ vue.js:1710
handleError @ vue.js:1699
callHook @ vue.js:2897
mountComponent @ vue.js:2779
Vue$3.$mount @ vue.js:8416
Vue$3.$mount @ vue.js:10777
Vue._init @ vue.js:4557
Vue$3 @ vue.js:4646
(anonymous) @ main.js:1
vue.js:1719 Error: Error: inputSelector:[object HTMLInputElement]  must be a string. Each selector must match only one element and separated by ','
    at Function.checkArguments (docsearch.min.js:2)
    at new DocSearch (docsearch.min.js:2)
    at Factory (docsearch.min.js:2)
    at Vue$3.mounted (main.js:1)
    at callHook (vue.js:2895)
    at mountComponent (vue.js:2779)
    at Vue$3.$mount (vue.js:8416)
    at Vue$3.$mount (vue.js:10777)
    at Vue$3.Vue._init (vue.js:4557)
    at new Vue$3 (vue.js:4646)

Optimize Playground Tutorial for maintenance and community contribution

Two separate community contributions have exposed a maintenance issue with the Playground Tutorial. Because the tutorial constantly references finished code, when you suggest a change to the code, you need to copy/paste it in several places (which is not an obvious action). We need to look into a way to optimize the code blocks of the tutorial to make it easier and more error-proof to contribute to the code.

Bug related to the life cycle of an Android application

I am on android, once I press the button "back" and that the application is found in pause "onPause ()", and then I click on the icon of the application to engage "surResume ()" then the application bug. Once stop "onStop ()", click on the icon while it normally starts. Bug related to the life cycle of an Android application.

Improve build setup

Right now there are 4 different build commands to build the site.

• build:js - transforms main.js using babel.
• build:css - builds tailwind css
• build:samples - builds a samples.json file from the samples directory
• build - builds the site using metalsmith

This works, but it's not very convenient.

I would like to combine the whole build process into a single command and make a couple improvements:

• builds should be incremental (only build what changed)
• unused css should be stripped
• the directory structure should be cleaned up to have a content, and a src directory (or something similar)

Might be a good idea to delegate the build process to webpack?

Running app on ios

when I run npm run watch:ios
the process begins and opens up iOS simulator but the app isn't installed can't be viewed on iOS simulator.

Update docs for TimePicker and DatePicker

From @yassipad on March 24, 2018 12:26

Just because I ran into an issue where my date/time pickers would not trigger value change... simply because the events are respectively "dateChange" and "timeChange" instead of "dateChanged" and "timeChanged" as defined in the docs:

https://nativescript-vue.org/en/docs/elements/components/time-picker/#events
https://nativescript-vue.org/en/docs/elements/components/date-picker/#events

Copied from original issue: nativescript-vue/nativescript-vue#154

Next Steps

We are approaching a point where everything is fairly final.

There are a few more things we would like to do:

• Add an Edit this page type of button for every docs page
• Review and restructure the Introduction category to have a better user flow
• Improve readability of code blocks (ligther text on the dark bg?)
• Make headings clickable / linkable
• Add prev / next links to docs / posts
• Add a file for defining author details (username as key -> website, full name etc.)
• Create a preview component to show the screenshots generated in https://github.com/rigor789/nativescript-vue-ui-tests/tree/master/screenshots
• Update the landing page with proper content + more graphics
• Add meta information to every page for better SEO
• Add google analytics code
• Add algolia docsearch (once the page is live, and they can index the pages)
• Generate an rss / atom feed from the blog
• Generate a sitemap
• Create a favicon
• Make graphics for the different layouts
• Explain the layouts in more detail

Tutorial minor error

The tutorial on doc 2-playground-tutorial.md
is missing the param textWrap="true" on both even though the instructions tell you to add it, its not in the example and can be confusing.

Advanced setup links don't work

Trying to setup my linux machine for development but the advanced setup links on this page are broken. Is it possible that they are supposed to reference these links instead?

• Mac setup
• Linux setup
• Windows setup

slug is undefined

Something is wrong.
If just:

• git clone
• npm i
• npm run build

We are snowing this error:

Here is place where error happen:

Slug filed is undefined, as I understand it should be set here:

Break point in L62 is never happen

Update TabView docs

From @yassipad on March 26, 2018 8:37

The event emitted by TabView is @tabChange and not @selectedIndexChanged unlike what's described in the docs: https://nativescript-vue.org/en/docs/elements/components/tab-view/#events.

Copied from original issue: nativescript-vue/nativescript-vue#159

Explicitly state whether TypeScript development is supported

From Vladimir Amiorkov via email:

All of the examples I saw in both nativescript-vue and the playground were written in pure JavaScript. Our Pro UI plugin is entirely written in TypeScript which made it hard to choose what to use and was wondering if TypeScript should and could be used at all.
Suggestion: If TypeScript is either supported or not, mention it somewhere. I am not 100% sure if the VueJS developers expect to see JS or TS but from a perspective of a plugin developer I could go either way and I would like to know if there are any limitations to either approach.

Tasks:

• Explicitly state whether development using TS is supported. It seems to be a preferred path for {N} developers and the lack of information might be misleading.
• Note any troubleshooting info, quirks, or other very specific information related to TypeScript development in the {N}+Vue context.

[Question] Translation Guide

I would like to translate docs to Korean.
Do we have any guideline for a translation?
Naturally, I presume that I can just fork a repo and add/edit build/index.js and content/docs/ko.
However, I would be glad if I can have any other guideline or advice. :-)

Working Vuex - Suggestion??

First off... looks great!!

In the example you are using mapActions, but not mapState

message () {
  return `Counter: ${this.$store.state.counter.count}`;
},
surprise () {
  return (this.$store.state.counter.count >= 5);
},

vs

...mapState({
  message: state => `Counter: ${state.counter.count}`,
  surprise: state => state.counter.count >= 5
})

also I noticed that we need to actually inject the store into the Vue object, which doesn't appear to be necessary in normal vuejs so you might want to highlight what is happening there and why

Vue.prototype.$store = store;

Extend routing documentation

Here are a few suggestions for extending the routing section of the docs:

• Tabs navigation;
• Drawer navigation (f.e. document the approach used in the Drawer Navigation template;
• App/Playground sample for navigation when using multiple frames;
• Playground samples (f.e. @jlooper's great samples with dynamic components, $navigateTo and the nativescript-vue-navigator plugin);
• Document the usage of nativescript-vue-navigator.

Please add your use cases and other suggestions for the routing docs in the comments below :)

License for Documentation

This repository doesn't have a LICENSE file. I'd like to use some of these awesome documents as the base for another framework's port to NativeScript. Is it possible to do this?

Document ScrollView

A reminder to add ScrollView to the 'ELEMENTS:COMPONENTS' section.

Improve template and CLI-related information in the Quick Start

From Vladimir Amiorkov via email:

The Quick Start shows how to use the vue CLI which created a very strange “new” {N} app for me. I was not sure what this was supposed to create. It looked like a project that shares the code between VueJS web and {N} Vue, still not sure what the “vue init nativescript-vue/vue-cli-template ” command is creating for me.
Suggestion: It would be great if the documentation about “Quick Start” has a section that describes what the “nativescript-vue/vue-cli-template” template hold. Maybe some of the text from here, or maybe I was expecting too much from the “Quick Start” section but its current state left me wondering in the end.

Tasks:

• Explain what the suggested commands do.
• Provide information about the created template (from a vue and {N} perspective). Could link to a more in-depth template overview.

Document Vue.registerElement

We have a short doc about using nativescript plugins, but there are no details about the registerElement function itself.

Document component routing

In #40 we documented page routing, but there's no example of component routing in the docs yet. There's an example in the nativescript-vue repo.

Show article title in the browser tab

Right now all open browser tabs where pages from the docs are loaded say "NativeScript-Vue". Ideally, these would also show the title of the current article. This would improve the user experience when bookmarking content and when switching between multiple open tabs.

Idea: Link all vue-specific code in code examples

Moved from nativescript-vue/nativescript-vue#85

---

We will have a lot of code examples in the docs, it would be really nice if all the vue specific syntax would get converted into a clickable link, which would bring up a modal containing official docs about that specific feature.

Example

<Button @tap="doSomething"/>

The @tap part would become a clickable link, which would bring up https://vuejs.org/v2/guide/events.html

Or

<Label v-if="showHello" text="Hello"

v-if="showHello" would become clickable and open https://vuejs.org/v2/guide/conditional.html#v-if

This needs some tinkering to get it right, but I feel like this would make learning nativescript-vue a whole lot easier for newcomers.

Documentation for Frame component has no sidebar entry.

Googling about specific Frame related problem I'm having brought me to this page result:

https://nativescript-vue.org/en/docs/elements/components/frame/

The the documentation helped me find a solution but I noticed it has no entry for sidebar topics under ELEMENTS:COMPONENTS. I think it should have an entry to avoid unnecessary confusion with its usage under the vue context vs. the one found on nativescript core documentation.

java.lang.RuntimeException: Unable to create application com.tns.NativeScriptApplication: com.tns.NativeScriptException:

error info :

Successfully synced application com.im.zlpopo on device emulator-5554.
ActivityManager: Start proc 8758:com.im.zlpopo/u0a67 for activity com.im.zlpopo/com.tns.NativeScriptActivity
System.err: java.lang.RuntimeException: Unable to create application com.tns.NativeScriptApplication: com.tns.NativeScriptException:
System.err: Cannot compile /data/data/com.im.zlpopo/files/app/main.js
System.err: SyntaxError: Unexpected identifier
System.err: File: "file:///data/data/com.im.zlpopo/files/app/main.js, line: 1, column: 67
System.err: StackTrace:
System.err: Frame: function:‘require’, file:’’, line: 1, column: 266
System.err: SyntaxError: Unexpected identifier
System.err: File: ", line: 1, column: 265
System.err: StackTrace:
System.err: Frame: function:‘require’, file:’’, line: 1, column: 266
System.err: at android.app.ActivityThread.handleBindApplication(ActivityThread.java:4710)
System.err: at android.app.ActivityThread.-wrap1(ActivityThread.java)
System.err: at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1405)
System.err: at android.os.Handler.dispatchMessage(Handler.java:102)
System.err: at android.os.Looper.loop(Looper.java:148)
System.err: at android.app.ActivityThread.main(ActivityThread.java:5417)
System.err: at java.lang.reflect.Method.invoke(Native Method)
System.err: at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:726)
System.err: at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:616)
System.err: Caused by: com.tns.NativeScriptException:
System.err: Cannot compile /data/data/com.im.zlpopo/files/app/main.js
System.err: SyntaxError: Unexpected identifier
System.err: File: "file:///data/data/com.im.zlpopo/files/app/main.js, line: 1, column: 67
System.err: StackTrace:
System.err: Frame: function:‘require’, file:’’, line: 1, column: 266
System.err: SyntaxError: Unexpected identifier
System.err: File: ", line: 1, column: 265
System.err: StackTrace:
System.err: Frame: function:‘require’, file:’’, line: 1, column: 266
System.err: at com.tns.Runtime.runModule(Native Method)
System.err: at com.tns.Runtime.runModule(Runtime.java:553)
System.err: at com.tns.Runtime.run(Runtime.java:545)
System.err: at com.tns.NativeScriptApplication.onCreate(NativeScriptApplication.java:21)
System.err: at android.app.Instrumentation.callApplicationOnCreate(Instrumentation.java:1013)
System.err: at android.app.ActivityThread.handleBindApplication(ActivityThread.java:4707)
System.err: … 8 more
ActivityManager: Process com.im.zlpopo (pid 8758) has died

image

https://discourse-cdn-sjc2.com/standard14/uploads/nativescript/original/2X/5/54de36d8cbed39bb5cb93d2183e6bfceb675ee70.png

favicon 404

This is the most trivial of issues, but the favicon link is broke on the site https://nativescript-vue.org/favicon-32x32.png.

Provide documentation about using custom components

From Vladimir Amiorkov via email:

There are zero documentation/blogs about this topic. I did not found anything that provides information how the nativescript-vue elementRegister works.
Suggestion: We would write some help articles on this topic because if we want the community to be able to write support for nativescript-vue in their plugins we have to make it as easy as possible with good reading meterial

More:

I was expecting at least a very simple example that shows how to register an element, and register a custom component that the nativescript-vue will render. An example that showcases the lifecycle events of VueJs inside the NativeScript framework or at least links to the official VueJS documentation on the “custom component” topic
Suggestion: I think we need to have an separate article in the documentation about this topic. This will make the plugin developers have a place to start from. As a bigger task I see an entire section of the documentation dedicated to how a custom component/directive should be implemented in the nativescript-vue realm or even a section about “ How to use custom {N} plugins inside NativeScript-Vue”

Tasks:

• Create docs about creating vue-compatible plugins. In particular, cover how nativescript-vue-elementRegister works.
• Create docs about using custom plugins/components in {N} Vue.

Better reference link to the NS documentation

Right now in almost every article documented there is the following text:

For more information about the available properties, methods, and events, head over to [the complete API documentation for XXX].

Where [the complete API documentation for XXX] copy includes a link to the NS API, which I think is useful but hard to read.

For example, the AbsoluteLayout NS-vue docs links to the AbsoluteLayout API docs which I think is less useful than linking to the AbsoluteLayout NS doc.

IMHO, the ideal solution would be link both of them, something like:

See [the NS docs] for more information about XXX. For information about the available properties, methods, and events, head over to [the complete API documentation].

Rework scrollview docs

@Piterden yes it is the code for the screenshot, but for documentation purposes it is way too verbose. I'm thinking we need to change both the sample code, and the screenshot to be the same, but shorter than the current one.

Originally posted by @rigor789 in #225 (comment)

Incorrect link to <ActivityIndicator>

Its at the top of this page.
https://nativescript-vue.org/en/docs/elements/components/progress/

currently links to
https://nativescript-vue.org/en/docs/elements/components/progress/activity-indicator