another approach

lnbits/core/templates/core/wallet.html

@@ -5,6 +5,7 @@
 {% from "macros.jinja" import window_vars with context %}
 <!---->
 {% block scripts %} {{ window_vars(user, wallet) }}
+<script src="{{ static_url_for('static', 'js/base.js') }}"></script>
 <script src="{{ static_url_for('static', 'js/wallet.js') }}"></script>
 {% endblock %}
 <!---->

lnbits/static/js/init-app.js

@@ -1,43 +1,83 @@
-window.router = VueRouter.createRouter({
-    history: VueRouter.createWebHistory(),
-    routes: [  
-      {
-          path: '/wallet',
-          name: 'Wallet',
-          component: {
-              template: '<div ref="content"></div>',
-              async mounted() {
-                  try {
-                      const response = await fetch('/wallet', {
-                          credentials: 'include',
-                          headers: {
-                              'Accept': 'text/html',
-                              'X-Requested-With': 'XMLHttpRequest'
-                          }
-                      })
-                      const html = await response.text()
-                      this.$refs.content.innerHTML = html
-                      this.$nextTick(() => {
-                          if (this.$forceUpdate) {
-                            this.$forceUpdate()
-                          }
-                      })
-                  } catch (error) {
-                      console.error('Error loading wallet:', error)
-                  }
-              }
-          }
-      }
-    ]
-  })
-  
-  window.router.beforeEach((to, from, next) => {
-      console.log('Route changing from', from.path, 'to', to.path)
-      next()
-  })
+// Utility function to dynamically load a script
+function loadScript(src) {
+  return new Promise((resolve, reject) => {
+    if (document.querySelector(`script[src="${src}"]`)) {
+      resolve(); // Already loaded
+      return;
+    }
 
-window.app.use(VueQrcodeReader)
-window.app.use(Quasar)
-window.app.use(window.i18n)
-window.app.use(window.router)
-window.app.mount('#vue')
+    const script = document.createElement('script');
+    script.src = src;
+    script.async = true;
+    script.onload = resolve;
+    script.onerror = () => reject(new Error(`Failed to load script: ${src}`));
+    document.head.appendChild(script);
+  });
+}
+
+// Function to load content based on the route
+function loadContent(route) {
+  const contentContainer = document.getElementById('content-container');
+  const routes = {
+    '/wallet': '/wallet',
+   // '/admin': '/admin',
+    // Add other routes here
+  };
+
+  if (routes[route]) {
+    // Load the scripts first
+    loadScript('/static/js/base.js')
+      .then(() => loadScript('/static/js/components.js'))
+      .then(() => loadScript('/static/js/wallet.js'))
+      .then(() => {
+        // Now fetch the content after all scripts are loaded
+        return fetch(routes[route], {
+          credentials: 'include',
+          headers: {
+            'Accept': 'text/html',
+            'X-Requested-With': 'XMLHttpRequest',
+          },
+        });
+      })
+      .then((response) => response.text())
+      .then((html) => {
+        contentContainer.innerHTML = html; // Inject the HTML content
+        // After the content is injected, initialize Vue if necessary
+
+      })
+      .catch((error) => {
+        console.error('Error loading content or scripts:', error);
+      });
+  } else {
+    console.error('Route not found');
+  }
+}
+
+// Event listener to detect route change
+window.addEventListener('popstate', function () {
+  const currentRoute = window.location.pathname;
+  loadContent(currentRoute); // Load content for the current route
+});
+
+// Function to navigate to a new route and load content
+function navigateTo(route) {
+  window.history.pushState({}, '', route);
+  loadContent(route);
+}
+
+// Initial content load based on the current path
+loadContent(window.location.pathname);
+
+// Listen for route changes and load corresponding content
+function onRouteChange() {
+  const currentRoute = window.location.pathname;
+  loadContent(currentRoute);
+}
+
+window.addEventListener('popstate', onRouteChange);
+
+console.log('Scripts loaded and content injected.');
+window.app.use(VueQrcodeReader);
+window.app.use(Quasar);
+window.app.use(window.i18n);
+window.app.mount('#vue');

lnbits/templates/base.html

@@ -179,7 +179,7 @@
             :updateTrigger="updateTrigger"
             :balance="balance"
           ></lnbits-wallet-list>
-          <q-btn to="/wallet">test</q-btn>
+          <q-btn onclick="navigateTo('/wallet')">Go to Wallet</q-btn>
           <lnbits-manage
             :show-admin="'{{LNBITS_ADMIN_UI}}' == 'True'"
             :show-users="'{{LNBITS_ADMIN_UI}}' == 'True'"
@@ -193,7 +193,8 @@
         <q-page-container>
           
           <q-page class="q-px-md q-py-lg" :class="{'q-px-lg': $q.screen.gt.xs}">
-            <router-view></router-view>{% block page %}{% endblock %}
+            {% block page %}{% endblock %}
+            <div id="content-container"></div> 
           </q-page>
         </q-page-container>
         {% endblock %} {% block footer %}