Nativescript-vue: General help and information

Created on 19 Mar 2018  路  2Comments  路  Source: nativescript-vue/nativescript-vue

Hi,

Me and my colleagues are currently spiking nativescript-vue to see if it is something we can build a mobile app in. So far we have enjoyed it, we just have a few queries for whomever can answer them :)

  1. We are currently struggling to apply css margins to stack-layout components. Is this by design?
  2. We are finding it difficult to debug the vuex state in the app. Is there anything in the pipeline to help with this (for example something like the chrome Vue / Vuex debugger)?
  3. We are finding every time the code changes and the app reboots, the chrome debugger url stops working. Is this normal?
  4. Is there anything in the pipeline to support more css properties (transitions, display, position etc)?
  5. There seems to be a lot of hardcoded default styling attached to each component, can this be nullified / normalised in any way?

Any help would be greatly appreciated. Thank you.

question

Most helpful comment

Hi!

I'm happy to hear that you decide to give nativescript-vue a try!

  1. We are currently struggling to apply css margins to stack-layout components. Is this by design?

I think this really depends on the overall structure surrounding the StackLayout and not something I can easily answer without seeing the template.

I personally try to avoid using a StackLayout as much as possible, because the GridLayout seems to handle things a lot nicer (I have experienced weirdness with StackLayouts in the past, but that is to be addressed in the official NativeScript/NativeScript repository, because in nativescript-vue there is nothing overriding the behavior of it).

  1. We are finding it difficult to debug the vuex state in the app. Is there anything in the pipeline to help with this (for example something like the chrome Vue / Vuex debugger)?

A somewhat good start would be to use the built-in logger plugin https://vuex.vuejs.org/en/plugins.html#built-in-logger-plugin

While that's not perfect, it is certainly better than nothing. I have worked on an electron based Vue-Devtools shell which is currently available (https://github.com/vuejs/vue-devtools/pull/452) but had no time to create a client that would work in NativeScript yet. So definitly something in the pipeline, but not ready for usage yet.

  1. We are finding every time the code changes and the app reboots, the chrome debugger url stops working. Is this normal?

From personal experience this is normal, but I've only used it with nativescript-vue so I'm not sure about the other flavors (Vanilla, TS or Angular). This also should be tracked in the NativeScript/NativeScript repository unless it turns out that it is only specific to nativescript-vue.

  1. Is there anything in the pipeline to support more css properties (transitions, display, position etc)?

As with a few previous questions, the CSS support is provided by NativeScript itself, and nativescript-vue itself doesn't add or modify the supported css properties.

I'm pretty sure that gradient background support is coming really soon, and I am certain there are plans on adding more properties that make sense in a native platform. (I'd love to see shadows through css, because they are a bit tricky otherwise).

  1. There seems to be a lot of hardcoded default styling attached to each component, can this be nullified / normalised in any way?

These "hardcoded" defaults are done on the platform itself (Android / iOS), but there is definitely a potential in creating a reset stylesheet, that would override platform specific styles, but I don't know of any that are currently out there.

Hope I answered your questions in a way that is useful for you, but if not let me know and I can try and clarify things further.

All 2 comments

Hi!

I'm happy to hear that you decide to give nativescript-vue a try!

  1. We are currently struggling to apply css margins to stack-layout components. Is this by design?

I think this really depends on the overall structure surrounding the StackLayout and not something I can easily answer without seeing the template.

I personally try to avoid using a StackLayout as much as possible, because the GridLayout seems to handle things a lot nicer (I have experienced weirdness with StackLayouts in the past, but that is to be addressed in the official NativeScript/NativeScript repository, because in nativescript-vue there is nothing overriding the behavior of it).

  1. We are finding it difficult to debug the vuex state in the app. Is there anything in the pipeline to help with this (for example something like the chrome Vue / Vuex debugger)?

A somewhat good start would be to use the built-in logger plugin https://vuex.vuejs.org/en/plugins.html#built-in-logger-plugin

While that's not perfect, it is certainly better than nothing. I have worked on an electron based Vue-Devtools shell which is currently available (https://github.com/vuejs/vue-devtools/pull/452) but had no time to create a client that would work in NativeScript yet. So definitly something in the pipeline, but not ready for usage yet.

  1. We are finding every time the code changes and the app reboots, the chrome debugger url stops working. Is this normal?

From personal experience this is normal, but I've only used it with nativescript-vue so I'm not sure about the other flavors (Vanilla, TS or Angular). This also should be tracked in the NativeScript/NativeScript repository unless it turns out that it is only specific to nativescript-vue.

  1. Is there anything in the pipeline to support more css properties (transitions, display, position etc)?

As with a few previous questions, the CSS support is provided by NativeScript itself, and nativescript-vue itself doesn't add or modify the supported css properties.

I'm pretty sure that gradient background support is coming really soon, and I am certain there are plans on adding more properties that make sense in a native platform. (I'd love to see shadows through css, because they are a bit tricky otherwise).

  1. There seems to be a lot of hardcoded default styling attached to each component, can this be nullified / normalised in any way?

These "hardcoded" defaults are done on the platform itself (Android / iOS), but there is definitely a potential in creating a reset stylesheet, that would override platform specific styles, but I don't know of any that are currently out there.

Hope I answered your questions in a way that is useful for you, but if not let me know and I can try and clarify things further.

That's perfect, thank you.

Apologies, I was not aware the nativescript-vue project was independant from the nativescript project.

Was this page helpful?
0 / 5 - 0 ratings