Using Other Frameworks

import { hostExternalFrame } from '@vendure/admin-ui/core';export default [    hostExternalFrame({        path: '',        // You can also use parameters which allow the app        // to have dynamic routing, e.g.        // path: ':slug'        // Then you can use the getActivatedRoute() function from the        // UiDevkitClient in order to access the value of the "slug"        // parameter.        breadcrumbLabel: 'Vue App',        // This is the URL to the compiled React app index.        // The next step will explain the "assets/react-app" path.        extensionUrl: './assets/vue-app/index.html',        openInNewTab: false,    })];

import path from 'path';import { VendureConfig } from '@vendure/core';import { AdminUiPlugin } from '@vendure/admin-ui-plugin';import { compileUiExtensions } from '@vendure/ui-devkit/compiler';export const config: VendureConfig = {    // ...    plugins: [        AdminUiPlugin.init({            route: 'admin',            port: 3002,            app: compileUiExtensions({                outputPath: path.join(__dirname, '../admin-ui'),                extensions: [{                    // Points to the path containing our Angular "glue code" module                    extensionPath: path.join(__dirname, 'plugins/my-plugin/ui'),                    routes: [{ route: 'vue-ui', filePath: 'routes.ts' }],                    staticAssets: [                        // This is where we tell the compiler to copy the compiled Vue app                        // artifacts over to the Admin UI's `/static` directory. In this case we                        // also rename "build" to "vue-app". This is why the `extensionUrl`                        // in the module config points to './assets/vue-app/index.html'.                        {path: path.join(__dirname, 'plugins/my-plugin/ui/vue-app/dist'), rename: 'vue-app'},                    ],                }],                devMode: true,            }),        }),    ]};

import '@vendure/admin-ui/static/theme.min.css';

<!-- src/ui-extension/plain-js-app/index.html --><head>  <link rel="stylesheet" href="../../theme.min.css" /></head>

import { setTargetOrigin } from '@vendure/ui-devkit';setTargetOrigin('http://my-domain.com');

import { graphQlMutation, notify } from '@vendure/ui-devkit';// somewhere in your componentconst disableProduct = (id: string) => {  graphQlMutation(`    mutation DisableProduct($id: ID!) {      updateProduct(input: { id: $id, enabled: false }) {        id        enabled      }    }`, { id }).then(result => {     notify({       message: 'Updated Product',     });  })}

<!-- src/ui-extension/plain-js-app/index.html --><head>  <script src="../devkit/ui-devkit.js"></script></head><script>  const disableProduct = id => {    VendureUiClient.graphQlMutation(`      mutation DisableProduct($id: ID!) {        updateProduct(input: { id: $id, enabled: false }) {          id          enabled        }      }`, { id }).then(result => {       VendureUiClient.notify({         message: 'Updated Product',       });    })  }</script>