Vue Skia is an innovative 2D graphics rendering library for Vue, leveraging Skia for efficient software rasterization. Implemented in Rust, this library offers a unique blend of performance and low memory usage compared to native canvas solutions. Although still in its experimental stage, Vue Skia is a promising tool for developers seeking advanced graphical capabilities within Vue applications.
Vue Skia utilizes Skia, a popular graphics library, for rendering. This choice ensures high-quality graphics output with efficient performance, making it suitable for a wide range of graphical applications.
The core rendering functionality is implemented in Rust, providing several advantages:
Designed entirely with Vue syntax, Vue Skia integrates seamlessly into Vue projects. It supports typical Vue paradigms, making it easy for Vue developers to adopt and use.
Explore the capabilities of Vue Skia through the live demo.
To start using Vue Skia in your project, install it via npm:
$ npm i vue-skiaBelow is a simple example of how to set up and use Vue Skia in a Vue project.
main.ts
import { createApp } from "vue"
import App from "./App.vue"
import { VueSkia } from "vue-skia"
const app = createApp(App)
app.use(VueSkia)
app.mount("#app")App.vue
<template>
<template v-if="!loading">
<v-surface :width="360" :height="360">
<v-rect
:x="10"
:y="220"
:width="30"
:height="30"
color="cyan"
:style="'fill'"
/>
<v-line :strokeWidth="8" color="black" :p1="[100, 260]" :p2="[50, 285]" />
<v-round-rect
:x="220"
:y="50"
:width="80"
:height="80"
:r="10"
color="fuchsia"
:style="'stroke'"
/>
<v-circle :cx="200" :cy="260" :r="50" :style="'stroke'" color="fuchsia" />
<v-points
:points="[
[138, 10],
[178, 90],
[266, 103],
[202, 165],
[217, 254],
[138, 212],
[59, 254],
[74, 165],
[10, 103],
[98, 90],
[138, 10],
]"
:style="'fill'"
:strokeWidth="1"
:color="'rgba(200, 255, 0, 0.7)'"
/>
</v-surface>
</template>
</template>
<script lang="ts">
import { defineComponent } from "vue"
import launch, {
VSurface,
VRect,
VCircle,
VRoundRect,
VLine,
VPoints,
} from "vue-skia"
export default defineComponent({
name: "HelloWorld",
components: {
VSurface,
VRect,
VCircle,
VRoundRect,
VLine,
VPoints,
},
data() {
return {
loading: true,
}
},
mounted() {
launch().then(() => {
this.loading = false
})
},
})
</script>To develop the core Skia rendering library, run the following commands:
$ cd soft-skia
$ cargo testFor WebAssembly (WASM) development:
$ cd soft-skia-wasm
$ wasm-pack build --release --target webTo develop the Vue Skia framework:
$ cd vue-skia-framework
$ pnpm i
$ pnpm run buildFor developing and testing Vue components:
$ cd vue-playground
$ pnpm i
$ pnpm run servers_pbrt is a Rust crate implementing the PBRT book's C++ code for physically based rendering.