vuejs conditional wrapper

In my nativescript-vue application I have a singleFile component called profileForm. I want to use that component in two ways, if the user is logged in I want to have that component as the slot of my layout component to edit profile. Otherwise I want is as a registration form.

I don't want to create an extra component for handling this. So in one case I would like to have my component wrapped in a tag so I can navigate to it, with Vue.$navigateTo, in another case I'd like to wrap it in a component. But the component has a tag in itself so in that case I don't want the anymore.

In django templates I would do something like this:

<template>
  <Page v-if="is_signup" actionBarHidden="true">
  <AppLayout v-else title="Profile">
  ...
  </AppLayout v-else>
  </Page v-if="is_signup">
</template>

But of course this would not work in vuejs. Is there any way to achieve this in vuejs?

I could create a new component and wrap this there like so:

<template>
  <Page v-if="is_signup" actionBarHidden="true">
    <ProfileForm/>
  </Page>
  <AppLayout v-else title="Profile">
    <ProfileForm/>
  </AppLayout>
</template>

But I'd rather not create a new component for this task.

I was hoping to get something like this:

<template>
  <template :is="is_signup?'Page':'AppLayout'" :v-bind="is_signup?{actionBarHidden:true}:{title:'Profile'}">
    ...
  </template>
</template>

Does nativescript-vue have such syntax?

One way to do it:

I would go with a v-if / v-else logic if you have only two distinct but predefined options. Simply more semantic.

<template>
  <Page
    v-if="is_signup"
    :actionBarHidden="true"
  >
    <Label :text="'hello'" />
  </Page>
  <Label
    v-else
    :text="'hello'"
  />
</template>

<script>
import Label from '../components/Label.vue';
import Page from '../components/Page.vue';

export default {
  components: {
    Page,
    Label,
  },

  data() {
    return {
      is_signup: false, // you will have to find a way to set is_signup correctly
    };
  },
}
</script>

There are several other ways to achieve the same result; however without knowing more about the requirements I will just leave you with this first option :)