@nookuio/vue

Lightweight Vue plugin + Vite plugin to connect your Vue 3 application to the Nooku editor.

This package provides:

• A Vue 3 plugin that wires up the client-side runtime pieces used by Nooku.
• A Vite plugin to enable the inspector integration during local development.

Prerequisites

• Vue 3 project (Vue 3.x)

1) Install

Using npm:

npm install -D @nookuio/vue

Using pnpm:

pnpm add -D @nookuio/vue

2) Register the Vue plugin (runtime)

The package's default export is a Vue plugin. Register the plugin with app.use(...) in your app's entry file (e.g. main.js / main.ts).

Example main.ts:

import './assets/main.css';

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import nookuPlugin from '@nookuio/vue';

const app = createApp(App);

app.use(router);
if (import.meta.env.DEV) app.use(nookuPlugin);
app.mount('#app');

3) Add the Vite plugin

This package also exposes a Vite plugin (exported from @nookuio/vue/vite-plugin). Add it to your vite.config.ts file.

Example vite.config.ts:

import { fileURLToPath, URL } from 'node:url';

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

// https://vite.dev/config/
export default defineConfig({
  plugins: [vue(), nookuViteInspectorPlugin(),],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});