Panoramique
Use Vue.js and Pinia to build dynamic User Interfaces.
INFO
The following documentation assumes you know at least the basics of Vue.js, you should get comfortable with how it works before trying to integrate panoramique into your app.
Install
npm i @xoram/plugin-panoramique
yarn add @xoram/plugin-panoramique
pnpm add @xoram/plugin-panoramique
Add the plugin to your app :
import { createApp } from '@xoram/core';
import { panoramiquePlugin } from "@xoram/plugin-panoramique";
createApp([
panoramique,
/* your plugins go here */
]);
2
3
4
5
6
7
Quick setup
You will need to have a plugin mount the Vue application setup by panoramique
to the DOM where and when you want to. Other components will be able to register and mount components as needed.
import { definePlugin, dependsOn, onCreated } from '@xoram/core';
import { panoramiquePlugin } from '@xoram/plugin-panoramique';
export default definePlugin(name:'mount-vue-app', setup:() => {
// declare the dependency on panoramique
dependsOn(panoramiquePlugin.id);
onCreated(app => {
// you can mount to whatever element you want
app.services.vue.app.mount(rootContainer:'#my-app');
});
});
2
3
4
5
6
7
8
9
10
11
12
import { definePlugin } from '@xoram/core';
import { addChild, defineComponentDefinition, register, rootHarness } from '@xoram/plugin-panoramique';
import MyButton from './my-button.vue';
export const myCoolButtonPlugin = definePlugin('my-cool-button', () => {
// create a definition
const componentDefinition = defineComponentDefinition(
id:'my-button',
component:MyButton,
setup:({ bind }) => {
bind('text', 'I\'m a button');
},
);
// register the definition in panoramique
register(definition:componentDefinition);
// mount the component at the root of the app
addChild(parent:rootHarness, child:componentDefinition.id);
});
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import { createApp } from '@xoram/core';
import { panoramiquePlugin } from "@xoram/plugin-panoramique";
import { myCoolButtonPlugin } from "./my-cool-button.plugin.ts";
import { mountingPlugin } from "./mount.plugin.ts";
createApp([
panoramique,
mountingPlugin,
myCoolButtonPlugin,
]);
2
3
4
5
6
7
8
9
10
<script setup lang="ts">
/** the text shown on the button */
const { text = 'button' } = defineProps<{ text?: string }>();
</script>
<template>
<button role="menuitem">
{{ text }}
</button>
</template>
2
3
4
5
6
7
8
9
10
Usage in depth
We only covered the very basics here. To learn more about all the features of Panoramique, check the following pages where you'll learn more about component definitions, harnesses, the helpers provided, and how you can use reactivity to your advantage.
You can also check the API reference for the @xoram/plugin-panoramique
package.