Integrate Orbit with Vue

Integrating Orbit with Vue is straightforward. Below, you’ll find step-by-step instructions for both browser-based and Node.js-based Vue projects.

1. Browser-Based Integration

If you’re using Vue directly in the browser, follow these steps:

Import Orbit files

Add the Orbit CSS and JavaScript files to your HTML file using a CDN:

<head>
  <!-- Vue -->
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <!-- Orbit -->
  <link rel="stylesheet" href="https://unpkg.com/@zumer/orbit@latest/dist/orbit.css">
  <script src="https://unpkg.com/@zumer/orbit@latest/dist/orbit.js"></script>
</head>

Configure Vue to recognize Orbit components

Orbit uses custom elements (e.g., <o-arc> and <o-progress>), which Vue treats as Vue elements by default. To fix this, inform Vue that these elements are custom:

const { createApp } = Vue;

const app = createApp({
  // Your Vue app configuration
}).mount('#app');

// Treat all tags starting with 'o-' as custom elements
app.config.compilerOptions.isCustomElement = (tag) => {
  return tag.startsWith('o-');
};

2. Node.js-Based integration

If you’re using Vue in a Node.js environment (e.g., with Vite or Vue CLI), follow these steps:

Install Orbit via npm

Install Orbit as a dependency in your project:

npm install @zumer/orbit

Import Orbit files

Import the Orbit CSS and JavaScript files in your main entry file (e.g., main.js or main.ts):

import '@zumer/orbit/dist/orbit.css';
import '@zumer/orbit/dist/orbit.js';

const { createApp } = Vue;

const app = createApp({
  // Your Vue app configuration
}).mount('#app');

Configure Vue to recognize Orbit components

Update your vue.config.js (or Vite configuration) to treat Orbit components (o-arc, o-progress) as custom elements:

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => ['o-arc', 'o-progress'].includes(tag),
        },
      },
    }),
  ],
});

3. Playground: using Orbit in Vue

Here’s an example of how to use Orbit in a Vue component. This example creates a radial layout with dynamic content: