@mizchi/qwik-vue
Qwikify vue components on qwik.
$ npm install @mizchi/qwik-vue @vitejs/plugin-vue vue -D
CAUTION - This is PoC phase. You should check it works on your app.
How to use
vite.config.ts
import { defineConfig } from "vite";
import { qwikVite } from "@builder.io/qwik/optimizer";
import vue from "@vitejs/plugin-vue";
export default defineConfig(() => {
return {
plugins: [
vue(),
qwikVite()
],
};
});
Use vue components
<!-- src/components/App.vue -->
<script setup>
import { ref, defineProps } from 'vue';
const props = defineProps(["counter"]);
const count = ref(0);
</script>
<template>
<div>{{props.counter}}</div>
<button @click="count++">You clicked me {{ count }} times.</button>
</template>
Render with qwikifyVue$
import { component$ } from "@builder.io/qwik";
import App from "./components/App.vue";
import { qwikifyVue$ } from "@mizchi/qwik-vue";
const QApp = qwikifyVue$<{counter: number}>(App, {
eagerness: 'load',
});
export default component$(() => {
return <QApp counter={0} />;
});
How to contribute
develop
# clone
$ pnpm install
$ pnpm dev # check for src/root.tsx
$ pnpm build # emit lib files
TODO
- [ ] unit testing
- [ ]
<Slot>
- [ ] Props types for vue component
LICENSE
MIT