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" } } })