Nuxt•4mo ago

defineComponent equivalent

Howdy friends! Sorry for the noob questions, I'm trying to figure out what the defineComponent equivalent is for Nuxt 3. I have this section of code that I'm trying to make work, but I can't quite figure it out. I thought it was defineNuxtComponent, but I believe it is structured a bit differently:

<script lang="ts">
import { createPromiseClient } from '@connectrpc/connect';
import { DynamicContentService } from '~/../gen/proto/summit/v1/dynamiccontent_connect.js';
import { transportKey } from '~~/src/keys';
import type { Tutor } from '~~/gen/proto/summit/v1/dynamiccontent_pb';
import type { PromiseClient, Transport } from "@connectrpc/connect"

interface TutorData {
    tutors: Tutor[],
    client: PromiseClient<typeof DynamicContentService> | undefined
}

export default defineComponent({
    setup() {
        const transport = inject<Transport>(transportKey)
        if (!transport) {
            throw new Error("No transport set by provider")
        }
        return { transport }
    },
    data(): TutorData {
        return {
            tutors: [],
            client: undefined
        }
    },
    async mounted() {
        // make service client
        this.client = createPromiseClient(DynamicContentService, this.transport)
        
        // get tutors from client
        this.tutors.push(...(await this.client.listTutors({})).tutors)
    }
})

<script lang="ts">
import { createPromiseClient } from '@connectrpc/connect';
import { DynamicContentService } from '~/../gen/proto/summit/v1/dynamiccontent_connect.js';
import { transportKey } from '~~/src/keys';
import type { Tutor } from '~~/gen/proto/summit/v1/dynamiccontent_pb';
import type { PromiseClient, Transport } from "@connectrpc/connect"

interface TutorData {
    tutors: Tutor[],
    client: PromiseClient<typeof DynamicContentService> | undefined
}

export default defineComponent({
    setup() {
        const transport = inject<Transport>(transportKey)
        if (!transport) {
            throw new Error("No transport set by provider")
        }
        return { transport }
    },
    data(): TutorData {
        return {
            tutors: [],
            client: undefined
        }
    },
    async mounted() {
        // make service client
        this.client = createPromiseClient(DynamicContentService, this.transport)
        
        // get tutors from client
        this.tutors.push(...(await this.client.listTutors({})).tutors)
    }
})

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

defineComponent equivalent