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://zumerlab.github.io/orbit-docs/orbit/orbit.min.css">
  <script src="https://zumerlab.github.io/orbit-docs/orbit/orbit.min.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
});

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

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/style';
import '@zumer/orbit';

import { createApp } from 'vue';
import App from './App.vue';

createApp(App).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:

Examples include the current Orbit stylesheet and runtime. Get both files for your project.