Vue Skia

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.

Key Features

Skia-Based Rendering

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.

Rust Implementation

The core rendering functionality is implemented in Rust, providing several advantages:

  • Memory Efficiency: Rust's memory management capabilities allow Vue Skia to use less memory compared to traditional canvas implementations.
  • Safety and Performance: Rust's emphasis on safety and concurrency enhances the reliability and speed of the rendering process.

Vue Integration

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.

Live Demo

Explore the capabilities of Vue Skia through the live demo.

Installation

To start using Vue Skia in your project, install it via npm:

$ npm i vue-skia

Basic Usage

Below 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>

Library Development

Soft Skia Development

To develop the core Skia rendering library, run the following commands:

$ cd soft-skia
$ cargo test

Soft Skia WASM Development

For WebAssembly (WASM) development:

$ cd soft-skia-wasm
$ wasm-pack build --release --target web

Vue Skia Framework Development

To develop the Vue Skia framework:

$ cd vue-skia-framework
$ pnpm i
$ pnpm run build

Vue Playground Development

For developing and testing Vue components:

$ cd vue-playground
$ pnpm i
$ pnpm run serve

Similar Projects

Rustfinity.com

Links

  1. Home
  2. Learn Rust
  3. Get Started
  4. Practice Rust
  5. Challenges
  6. Tutorials
  7. Blog
  8. Open source
  9. Learn Gleam

Socials

  1. GitHub
  2. X

Legal

  1. Privacy Policy
  2. Terms of Service