Nativescript-Vue Javascript import custom elements like Button, FieldView, Label ecc

Question

Is this possibile to create a component_1.vue with a single element like a Textfield and export it like this:

<template>
  <TextField
    :text="textFieldValue"
    hint="Hint here.."
    class="textfield"
  />
</template>

<script>
export default {
    name: 'Custom_TextField',
    data: function () {
        return {
            class: class,
            text: text 
        }
    }
}
</script>

And the use it in another component_2.vue ?

<template>
  <Label text="Component_1 below" />
  <Custom_TextField />
</template>

<script>
import component_1.vue from "@/components/component_1.vue"

export default {
}
</script>

Answer 1

It's certainly possible.

A good example can be found in the Nativescript samples page (Restaurant Menu App - market.nativescript.org)

And here its playground code: https://play.nativescript.org/?template=play-vue&id=sPOHNo&v=278

If you open the Home.vue component you can see 3 custom components being imported and then used in the Nativescript layout on the top.

Custom components in Home.vue:

import navBottom from "./custom/navBottom";
import Item from "./custom/item";
import Category from "./custom/category";

Custom components used in the Home.vue layout:

<item :item="item" @clicked="showItem(item)" />
<Category :item="item"> </Category>
<navBottom row="3" />

You can see the custom components under the custom folder of the app

Hope that helps.