Vue3 Update

arswaw · Oct 14, 2024 · 2484d74 · 2484d74
1 parent 0d2bd75
commit 2484d74
Show file tree

Hide file tree

Showing 9 changed files with 68 additions and 11,965 deletions.
diff --git a/README.md b/README.md
@@ -1,5 +1,5 @@
 # VueSpaNONODE
-This is a single-page application that uses Vue and Vue Router. It uses ES6 imports to render components and templates. No Node is required. Just git clone and serve statically. 
+This is a single-page application that uses Vue 3 and Vue Router. It uses ES6 imports to render components and templates. No Node is required. Just git clone and serve statically. 
 
 You can also select "Use this Template" in order to create a new single-page application that you can build upon. You can write code in any environment that has a static web-server. There are no dependencies.
 

diff --git a/components/about.js b/components/about.js
@@ -1,8 +1,6 @@
-import { AboutTemplate } from "../templates/about-template.js";
-
-
-const About = {
-    template: AboutTemplate,
-}
-
-export { About }
+export default {
+    setup() {},
+    template: `<h1>This is About</h1>`
+    // Can also target an in-DOM template:
+    // template: '#my-template-element'
+}
diff --git a/components/home.js b/components/home.js
@@ -0,0 +1,6 @@
+export default {
+    template: `
+      <h1>This is Home</h1>`
+    // Can also target an in-DOM template:
+    // template: '#my-template-element'
+}
diff --git a/index.html b/index.html
@@ -3,7 +3,7 @@
 <html lang="en">
 
 <head>
-    <title>Vue SPA</title>
+    <title>Vue SPA No Node</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
     <style>
         ul {
@@ -40,9 +40,23 @@
 
 <body>
 
-    <div id="app"></div>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.2/vue-router.js"></script>
+    <div id="app">
+
+    </div>
+    <!-- <script type="importmap">
+        {
+          "imports": {
+            "Vue": "https://cdnjs.cloudflare.com/ajax/libs/vue/3.5.12/vue.esm-browser.min.js"
+          }
+        }
+    </script> -->
+    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+    <script src="https://unpkg.com/[email protected]/dist/vue-router.global.js"></script>
     <script type="module" src="main.js"></script>
 </body>
 
-</html>
+</html>
+            <!-- "@vue/devtools-api": "https://unpkg.com/@vue/[email protected]/dist/index.js",
+            "@vue/devtools-kit": "https://unpkg.com/@vue/[email protected]/dist/index.js",
+            "@vue/devtools-shared": "https://unpkg.com/@vue/[email protected]/dist/index.js",
+            "perfect-debounce": "./perfect-debounce.js", -->
diff --git a/main.js b/main.js
@@ -1,30 +1,44 @@
-import Vue from 'https://cdn.jsdelivr.net/npm/vue@latest/dist/vue.esm.browser.min.js'
+const { createApp, ref } = Vue
+const { createRouter, createMemoryHistory, RouterLink, RouterView } = VueRouter
 
-import {
-    Navbar
-} from './components/navbar.js'
+import Home from './components/home.js'
 
-import {
-    MainTemplate
-} from './templates/main-template.js'
+import About from './components/about.js'
 
-import { About } from './components/about.js'
+const routes = [
+  { path: '/', component: Home },
+  { path: '/about', component: About },
+]
 
-Vue.use(VueRouter)
-
-const router = new VueRouter({
-  routes: [{
-    path: '/about',
-    component: About,
-    name: "About Us Page"
-  }]
+const router = createRouter({
+  history: createMemoryHistory(),
+  routes,
 })
 
-new Vue({
-    el: '#app', // This should be the same as your <div id=""> from earlier.
-    components: {
-        'navbar': Navbar
-    },
-    router,
-    template: MainTemplate
+createApp({
+  setup() {
+    return {
+      count: ref(0)
+    }
+  },
+  components: {
+    Home,
+    RouterLink,
+    RouterView
+  },
+  template: `
+   <h1>Hello Vue No Node!</h1>
+        <p>
+            <strong>Current route path:</strong> {{ $route.fullPath }}
+        </p>
+        <nav>
+            <RouterLink to="/">Go to Home</RouterLink>
+            <RouterLink to="/about">Go to About</RouterLink>
+        </nav>
+        <main>
+            <RouterView />
+        </main>
+  `
 })
+.use(router)
+.mount('#app')
diff --git a/templates/about-template.js b/templates/about-template.js
diff --git a/templates/main-template.js b/templates/main-template.js
diff --git a/templates/navbar-template.js b/templates/navbar-template.js