Vue Composition API createComponent child components

Question

I'm simply trying to use a child component in a Nuxt/Composition API/TypeScript project using Vuetify. I've tried including the component before the setup method, but when I view the source I only see  where the child component data should be.

This is the layouts/default.vue layout that should be displaying the "nested" component.

<template>
  <v-app>
    <v-app-bar clipped-left app color="indigo darken-2" />
    <v-content>
      <nuxt />
    </v-content>
    <v-bottom-navigation
      v-model="bottomNav"
      color="indigo darken-2"
      absolute
      class="hidden-sm-and-up"
    >
      <v-btn
        value="search"
        @click="dialog=true"
      >
        <span>Search</span>
        <v-icon>mdi-magnify</v-icon>
      </v-btn>
    </v-bottom-navigation>
    <v-dialog v-model="dialog">
      <ListFilter
        @closeDialog="closeDialog"
      />
    </v-dialog>
  </v-app>
</template>

<script lang="ts">
import { createComponent, ref } from '@vue/composition-api'
import ListFilter from '~/components/ListFilter.vue'
export default createComponent({
  components: { ListFilter },
  setup() {
    const bottomNav = ref<string>()
    const dialog = ref<boolean>(false)
    const closeDialog = () => {
      dialog.value = false
      bottomNav.value = ''
    }
    return {
      bottomNav,
      dialog,
      closeDialog
    }
  }
})
</script>

Here is the sample contents of the components/ListFilter.vue component to be nested, the contents of which matter little.

<template>
  <v-card>
    <v-card-title>
      Search
    </v-card-title>
    <v-card-text>
      Test Text
    </v-card-text>
    <v-card-actions>
      <v-btn
        @click="closeDialog"
      >
        Close
      </v-btn>
    </v-card-actions>
  </v-card>
</template>

<script lang="ts">
import { createComponent } from '@vue/composition-api'
export default createComponent({
  setup(_, { emit }) {
    const closeDialog = () => {
      emit('closeDialog')
    }
    return closeDialog
  }
})
</script>

Yes. The screen goes the dark color it usually is for a dialog backdrop but nothing displays within it. If I manually put the card into the dialog everything works fine — Jeff

Michal Levý Michal Levý · Accepted Answer · 2020-01-01T18:30:38

Problem is return closeDialog in setup function of ListFilter component. If you return a function from setup(), Vue expects it is a render function. Try return { closeDialog } instead...

Vue Composition API createComponent child components

1 Answers