From 8368c5faa9a7c24567a7aa7d8ddc877cd0be8c1d Mon Sep 17 00:00:00 2001
From: Paul Pestov <10750176+paulpestov@users.noreply.github.com>
Date: Wed, 11 Oct 2023 23:01:37 +0200
Subject: [PATCH] Add runtime example
---
core/src/components/modules-container.vue | 11 +--------
core/src/main.js | 6 +++--
core/vite.config.js | 28 +++++++++++++++++++----
index.html | 15 +++++++++---
plugin-1/src/main.js | 10 +++++++-
plugin-1/vite.config.js | 6 +++++
6 files changed, 56 insertions(+), 20 deletions(-)
diff --git a/core/src/components/modules-container.vue b/core/src/components/modules-container.vue
index fbb3187..53e415a 100644
--- a/core/src/components/modules-container.vue
+++ b/core/src/components/modules-container.vue
@@ -1,19 +1,10 @@
-
+
diff --git a/core/src/main.js b/core/src/main.js
index 0052677..7890a16 100644
--- a/core/src/main.js
+++ b/core/src/main.js
@@ -4,7 +4,9 @@ import { store } from './store.js'
window.AppCore = function AppCore(config = {}) {
store.config = config
- createApp(App).mount('#app')
+ const plugin1 = config.modules[0]
+
+ createApp(App).use(plugin1).mount('#app')
}
-export default window.AppCore;
+export default window.AppCore
diff --git a/core/vite.config.js b/core/vite.config.js
index fb73bdb..1a891dc 100644
--- a/core/vite.config.js
+++ b/core/vite.config.js
@@ -1,4 +1,5 @@
import { fileURLToPath, URL } from 'node:url'
+import { resolve } from 'node:path'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
@@ -14,11 +15,30 @@ export default defineConfig({
}
},
build: {
+ // rollupOptions: {
+ // output: {
+ // entryFileNames: 'core.js',
+ // assetFileNames: 'core.css',
+ // }
+ // }
+ lib: {
+ // Could also be a dictionary or array of multiple entry points
+ entry: resolve(__dirname, 'src/main.js'),
+ name: 'Core',
+ // the proper extensions will be added
+ fileName: 'core',
+ },
rollupOptions: {
+ // make sure to externalize deps that shouldn't be bundled
+ // into your library
+ external: ['vue'],
output: {
- entryFileNames: 'core.js',
- assetFileNames: 'core.css',
- }
- }
+ // Provide global variables to use in the UMD build
+ // for externalized deps
+ globals: {
+ vue: 'Vue',
+ },
+ },
+ },
}
})
diff --git a/index.html b/index.html
index 1e93821..8415905 100644
--- a/index.html
+++ b/index.html
@@ -3,16 +3,25 @@
Vue Modular App Test
-
+
+
+
-
diff --git a/plugin-1/src/main.js b/plugin-1/src/main.js
index 6ff2d40..eb15a2a 100644
--- a/plugin-1/src/main.js
+++ b/plugin-1/src/main.js
@@ -1,3 +1,11 @@
import App from './app.vue'
-export { App as Plugin1 }
+// export { App as Plugin1 }
+
+window.Plugin1 = {
+ install: (app, options) => {
+ // Plugin code goes here
+ console.log(app)
+ app.component('PluginOne', App);
+ }
+}
diff --git a/plugin-1/vite.config.js b/plugin-1/vite.config.js
index 910df0b..0e7a763 100644
--- a/plugin-1/vite.config.js
+++ b/plugin-1/vite.config.js
@@ -14,6 +14,12 @@ export default defineConfig({
}
},
build: {
+ // rollupOptions: {
+ // output: {
+ // entryFileNames: 'plugin-1.js',
+ // assetFileNames: 'plugin-1.css',
+ // }
+ // }
lib: {
// Could also be a dictionary or array of multiple entry points
entry: resolve(__dirname, 'src/main.js'),