first commit

2024-08-12 08:42:51 +07:00
parent 6deeec116e
commit 2051b6439d
82 changed files with 78274 additions and 0 deletions
--- a/testmulticomponent/index.html
+++ b/testmulticomponent/index.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Vue 3 with Vuetify, Vuex, and Multiple Components</title>
+  <!-- Vuetify CSS -->
+  <link href="https://cdn.jsdelivr.net/npm/vuetify@3/dist/vuetify.min.css" rel="stylesheet">
+  <!-- Google Fonts (optional) -->
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
+</head>
+<body>
+  <div id="app"></div>
+
+  <!-- Vue.js -->
+  <script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
+  <!-- Vuex -->
+  <script src="https://cdn.jsdelivr.net/npm/vuex@next"></script>
+  <!-- Vuetify -->
+  <script src="https://cdn.jsdelivr.net/npm/vuetify@3"></script>
+  <!-- Axios -->
+  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+  <!-- Store JS -->
+  <script src="store/store.js"></script>
+  <!-- Component JS -->
+  <script src="components/ComponentA.js"></script>
+  <script src="components/ComponentB.js"></script>
+
+  <script>
+    // Define Vue components in global scope
+    //Vue.createApp({}).component('component-a', ComponentA);
+    //Vue.createApp({}).component('component-b', ComponentB);
+
+    // Vue App
+    const app = Vue.createApp({
+        components: {
+            'component-a': ComponentA,
+            'component-b': ComponentB
+          },
+      setup() {
+        const store = Vuex.useStore();
+        const count = Vue.computed(() => store.state.count);
+        const data = Vue.computed(() => store.state.data);
+
+        function increment() {
+          store.dispatch('increment');
+        }
+
+        function decrement() {
+          store.dispatch('decrement');
+        }
+
+        function fetchData() {
+          store.dispatch('fetchData');
+        }
+
+        return { count, data, increment, decrement, fetchData };
+      },
+      template: `
+        <v-container>
+
+          <v-card>
+
+          <component-a></component-a>
+          <component-b></component-b>
+        </v-container>
+      `
+    });
+
+    const vuetify = Vuetify.createVuetify();
+
+    app.use(store);
+    app.use(vuetify);
+    app.mount('#app');
+  </script>
+</body>
+</html>