How to use zoid with Vue 3

[JoseIsra]

Hi, i'm working with quasar and vue 3, also with typescript and the problem that i'm facing is how can i declare the zoid component to use it in my app. I have already "typed" the basic setup of the component i think but it doesn't really work.
I've updated the zoid version to use vue 3.
Here is the iframe configuration
`
/* eslint-disable @typescript-eslint/no-unsafe-member-access /
/ eslint-disable @typescript-eslint/no-unsafe-assignment */
import * as zoid from 'zoid/dist/zoid.frameworks';

// eslint-disable-next-line @typescript-eslint/no-unsafe-call
const FractalUpCooperate = zoid.create({
tag: 'issue-name',
url: 'issue-url',
dimensions: {
width: '100%',
height: '100%',
},
attributes: {
iframe: {
scrolling: 'no',
allow: 'camera *; microphone *; display-capture *;',
allowFullScreen: 'true',
allowusermedia: 'true',
},
},
props: {
roomId: {
type: 'string',
required: true,
},
streamId: {
type: 'string',
required: true,
},
streamName: {
type: 'string',
required: false,
},
photoURL: {
type: 'string',
required: false,
},
handleLeaveCall: {
type: 'function',
required: false,
},
handleStopRecording: {
type: 'function',
required: false,
},
handleStartRecording: {
type: 'function',
required: false,
},
isBeingRecorded: {
type: 'boolean',
required: false,
},
toggleMinimize: {
type: 'function',
required: false,
},
sharedLink: {
type: 'string',
required: false,
},
classroomId: {
type: 'string',
required: false,
},
isCameraLocked: {
type: 'boolean',
required: false,
},
isScreenShareLocked: {
type: 'boolean',
required: false,
},
isMicLocked: {
type: 'boolean',
required: false,
},
toggleLockAction: {
type: 'function',
required: false,
},
fractalUserId: {
type: 'string',
required: false,
},
roleId: {
type: 'number',
required: false,
},
logJoined: {
type: 'function',
required: false,
},
roomRestriction: {
type: 'number',
required: false,
},
getB2Info: {
type: 'function',
required: false,
},
isHost: {
type: 'boolean',
required: false,
},
startDate: {
type: 'string',
required: false,
},
bgInfo: {
type: 'object',
required: false,
},
setBackgroundInfo: {
type: 'function',
required: false,
},
pinnedUser: {
type: 'string',
required: false,
},
setPinnedUser: {
type: 'function',
required: false,
},
isMicOn: {
type: 'boolean',
required: false,
},
isCameraOn: {
type: 'boolean',
required: false,
},
micId: {
type: 'string',
required: false,
},
cameraId: {
type: 'string',
required: false,
},
hostId: {
type: 'string',
required: false,
},
handleParticipantLeave: {
type: 'function',
required: false,
},
isVisitor: {
type: 'boolean',
required: false,
},
prejoinView: {
type: 'boolean',
required: false,
},
miniMode: {
type: 'boolean',
required: false,
},
multichat: {
type: 'boolean',
required: false,
},
handleCooperateKv: {
type: 'function',
required: false,
},
isConnect: {
type: 'boolean',
required: false,
},
gamesList: {
type: 'array',
required: false,
},
gameQuestions: { type: 'array', required: false },
dispatchQuestionForGame: {
type: 'function',
required: false,
},
startWithVideo: {
type: 'boolean',
required: false,
},
},
});
// eslint-disable-next-line @typescript-eslint/no-unsafe-call
const FractalUpCooperateBreakout = FractalUpCooperate.driver('vue3');

export default FractalUpCooperateBreakout;
`
And the error is this:

Component provided template option but runtime compilation is not supported in this build of Vue. Configure your bundler to alias "vue" to "vue/dist/vue.esm-bundler.js".

also with this after the message above

Uncaught TypeError: Expected string or element selector to be passed

Help and advice please zoid GODS

[cvng]

can you try :

// vite.config.ts

defineViteConfig({ resolve: { alias: { vue: "vue/dist/vue.esm-bundler.js" } } })