Merge branch 'main' of https://github.com/themeselection/vue-cheatsheet

Author: DeepKumbhare85

content/.vitepress/config.mts

@@ -21,6 +21,7 @@ height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
 export default defineConfig({
   lang: 'en-US',
   title: 'Vue Cheatsheet',
+  lastUpdated: true,
   description: "The one and only cheatsheet you need for Vue.js by ThemeSelection",
   head: [
     ['link', { rel: 'icon', href: '/logos/favicon.ico' }],
@@ -92,6 +93,10 @@ export default defineConfig({
       { icon: 'github', link: 'https://github.com/themeselection/vue-cheatsheet' },
       { icon: 'twitter', link: 'https://twitter.com/Theme_Selection' }
     ],
+
+    editLink: {
+      pattern: 'https://github.com/themeselection/vue-cheatsheet/edit/main/content/:path'
+    }
   },
   vite: {
     resolve: {

content/vue-router/basic.md

@@ -10,8 +10,8 @@ const router = createRouter({
   routes: [
     {
       path: '/',
-      name: 'home',
-      component: () => import('./views/HomeView.vue')
+      name: 'home', // "home" will be route name
+      component: () => import('./views/HomeView.vue') // Always lazy load route components
     },
     {
       path: '/about',
@@ -28,12 +28,49 @@ Use `RouterView` to render the matched component for the current route, and use
 <template>
  <nav>
    <RouterLink to="/">Home</RouterLink>
-   <RouterLink :to="{ name: 'about' }">About</RouterLink>  <!-- Named Routes -->
+
+   <!-- Use route name via object syntax -->
+   <RouterLink :to="{ name: 'about' }">About</RouterLink>
  </nav>
  <RouterView />
 </template>
 ```
 
+## Programmatic Navigation
+
+Aside from using `<RouterLink>` to create anchor tags for declarative navigation, we can do this programmatically using the router's instance methods.
+
+| Declarative        |      Programmatic      |
+| ------------- | :-----------: |
+| `<RouterLink :to="...">`   | `router.push(...)` |
+| `<RouterLink :to="..." replace>`  | `router.replace(...)`    |
+| `window.history.go(n)`  |   `router.go(1)`    |
+
+The argument can be a string path, or a location descriptor object.
+
+```ts
+// literal string path
+router.push('/users/eduardo')
+
+// object with path
+router.push({ path: '/users/eduardo' })
+
+// named route with params to let the router build the url
+router.push({ name: 'user', params: { username: 'eduardo' } })
+
+// with query, resulting in /register?plan=private
+router.replace({ path: '/register', query: { plan: 'private' } })
+
+// with hash, resulting in /about#team
+router.replace({ path: '/about', hash: '#team' })
+
+// go forward by one record, the same as router.forward()
+router.go(1)
+
+// go back by one record, the same as router.back()
+router.go(-1)
+```
+
 ## Dynamic Routing
 
 Dynamic routes are used to match a series of routes with some params to be acquired. (Denoted by **colon** `:` )
@@ -177,41 +214,6 @@ const router = createRouter({
 </template>
 ```
 
-## Programmatic Navigation
-
-Aside from using `<RouterLink>` to create anchor tags for declarative navigation, we can do this programmatically using the router's instance methods.
-
-| Declarative        |      Programmatic      |
-| ------------- | :-----------: |
-| `<RouterLink :to="...">`   | `router.push(...)` |
-| `<RouterLink :to="..." replace>`  | `router.replace(...)`    |
-| `window.history.go(n)`  |   `router.go(1)`    |
-
-The argument can be a string path, or a location descriptor object.
-
-```ts
-// literal string path
-router.push('/users/eduardo')
-
-// object with path
-router.push({ path: '/users/eduardo' })
-
-// named route with params to let the router build the url
-router.push({ name: 'user', params: { username: 'eduardo' } })
-
-// with query, resulting in /register?plan=private
-router.replace({ path: '/register', query: { plan: 'private' } })
-
-// with hash, resulting in /about#team
-router.replace({ path: '/about', hash: '#team' })
-
-// go forward by one record, the same as router.forward()
-router.go(1)
-
-// go back by one record, the same as router.back()
-router.go(-1)
-```
-
 ## Named Views
 
 ```ts
@@ -304,16 +306,19 @@ const User = {
   
 const routes = [
   // Boolean mode
-  { path: '/user/:id',
+  { 
+    path: '/user/:id',
     component: User,
     props: true
   },
+
   // Object mode
   {
     path: '/user/:id',
     components: { default: User, sidebar: Sidebar },
     props: { default: true, sidebar: false }
   },
+    
   // Function mode
   {
     path: '/search',

readme.md

@@ -64,7 +64,7 @@ If you want to [Download Free Admin Templates](https://themeselection.com/produc
 
 ## Social Media 😇
 
-- Twitter : [https://twitter.com/themeselect](https://twitter.com/themeselect)
-- Facebook : [https://www.facebook.com/ThemeSelections/](https://www.facebook.com/ThemeSelections/)
-- Pintrest : [https://pinterest.com/themeselect/](https://pinterest.com/themeselect/)
-- Instagram : [https://www.instagram.com/themeselect_official/](https://www.instagram.com/themeselect_official/)
+- Twitter : [https://twitter.com/Theme_Selection](https://twitter.com/Theme_Selection)
+- Facebook : [https://www.facebook.com/ThemeSelections](https://www.facebook.com/ThemeSelections/)
+- Pintrest : [https://www.pinterest.com/themeselection/](https://www.pinterest.com/themeselection/)
+- Instagram : [https://www.instagram.com/themeselection/](https://www.instagram.com/themeselection/)