Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
  • Loading branch information
yagnikvamja committed Mar 19, 2024
2 parents 71a353d + 1b35e8d commit d36c2dc
Show file tree
Hide file tree
Showing 20 changed files with 614 additions and 267 deletions.
1 change: 1 addition & 0 deletions .vscode/settings.json
Original file line number Diff line number Diff line change
Expand Up @@ -20,4 +20,5 @@
"emmet.includeLanguages": {
"markdown": "html",
},
"commentAnchors.tagHighlights.enabled": false,
}
28 changes: 21 additions & 7 deletions content/.vitepress/config.mts
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ const gtmConfig = {
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-5DDHKGP');</script>
})(window,document,'script','dataLayer','GTM-PVB8N2Q');</script>
<!-- End Google Tag Manager -->`,
bodyNoScript: `<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5DDHKGP"
Expand All @@ -20,9 +20,9 @@ height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
// https://vitepress.dev/reference/site-config
export default defineConfig({
lang: 'en-US',
title: 'Vue Cheatsheet',
title: 'Vue Cheatsheet By ThemeSelection',
lastUpdated: true,
description: "The one and only cheatsheet you need for Vue.js by ThemeSelection",
description: "The one and only Vue cheatsheet you need for VueJS by ThemeSelection",
head: [
['link', { rel: 'icon', href: '/logos/favicon.ico' }],
['link', { rel: 'apple-touch-icon', href: '/logos/apple-icon-57x57.png' }],
Expand All @@ -39,13 +39,28 @@ export default defineConfig({
['link', { rel: 'icon', href: '/logos/favicon-96x96.png' }],
['link', { rel: 'icon', href: '/logos/favicon-16x16.png' }],
['link', { rel: 'manifest', href: '/logos/manifest.json' }],
['meta', { property: 'og:title', content: 'Vue Cheatsheet' }],
['meta', { property: 'og:description', content: 'The only VueJS cheatsheet you will ever need' }],
['meta', { property: 'og:image', content: 'https://ts-assets.b-cdn.net/ts-assets/vue-cheatsheet/github-banner-smm.png' }],
['meta', { property: 'twitter:image', content: 'https://ts-assets.b-cdn.net/ts-assets/vue-cheatsheet/github-banner-smm.png' }],
['meta', { property: 'twitter:title', content: 'Vue.js CheatSheet By ThemeSelection' }],
['meta', { property: 'twitter:description', content: 'Accelerate your vue learning & improve your skills with our comprehensive Vue 3 cheatsheet.' }],
['meta', { property: 'twitter:card', content: 'summary_large_image' }],
['meta', { property: 'twitter:site', content: '@Theme_Selection' }],
['meta', { property: 'twitter:creator', content: '@Theme_Selection' }],
['meta', { property: 'keywords', content: 'Vue 3 Cheatsheet, VueJS Cheatsheet, Vue JS Cheatsheet' }],
['meta', { property: 'google-site-verification', content: 'Eb4Y887SF6gMOy33YpMZEZLJuVfQHW9E3b8QjoSTDhw' }],
['script', { src: 'https://buttons.github.io/buttons.js' }]
],
themeConfig: {
logo: '/vue-cheatsheet-logo.png',
siteTitle: false,
logo: { src: '/vue-cheatsheet-logo.png', alt: 'Vue Cheatsheet' },

siteTitle: 'Vue Cheatsheet',
search: {
provider: 'local',
options: {
detailedView: true,
},
},
// https://vitepress.dev/reference/default-theme-config
nav: [
Expand Down Expand Up @@ -90,7 +105,6 @@ export default defineConfig({
],

socialLinks: [
{ icon: 'github', link: 'https://github.com/themeselection/vue-cheatsheet' },
{ icon: 'twitter', link: 'https://twitter.com/Theme_Selection' }
],

Expand Down
29 changes: 29 additions & 0 deletions content/.vitepress/theme/components/ActionButtons.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<script lang="ts" setup>
import { useData } from 'vitepress';
const { isDark } = useData()
</script>
<template>
<div class="mt-4 flex items-center gap-x-3">
<!-- <a data-v-0c3feb32 data-v-2270f7fa class="VPButton medium brand" href="/vue/basic.html">Let's Start</a> -->
<a class="action-btn" href="/vue/basic.html">Let's Start</a>
<a href="https://www.producthunt.com/posts/vue-cheatsheet?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-vue&#0045;cheatsheet"
target="_blank"><img
:src="`https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=445414&theme=${isDark ? 'dark' : 'light'}`"
alt="Vue&#0032;CheatSheet - The&#0032;Ultimate&#0032;Vue&#0032;CheatSheet&#0032;For&#0032;Vue&#0044;&#0032;Vue&#0032;Router&#0032;&#0038;&#0032;Pinia | Product Hunt"
style="width: auto; height: 40px;border: 1px solid #fff;border-radius: 6px;" width="auto"
height="40" /></a>
</div>
</template>

<style>
.action-btn {
padding: 0.5rem 1rem;
border-radius: 0.5rem;
background-color: var(--vp-c-brand-2);
color: #fff;
font-weight: 600;
text-decoration: none;
transition: all 0.3s;
}
</style>
2 changes: 1 addition & 1 deletion content/.vitepress/theme/components/Footer.vue
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ const secondColLinks = [
<hr class="divider">
<div
class="container mx-auto flex flex-wrap items-center justify-between border-gray-300 dark:border-zinc-700 pt-8 pb-6 gap-3 px-6 sm:px-12 lg:px-16">
<a href="https://themeselection.com/" target="_blank" class="themeselection-logo"> </a>
<a href="https://themeselection.com/" target="_blank" class="themeselection-logo" alt="ThemeSelection"> </a>
<div class="flex items-center gap-x-1">
<span>© 2024-Present, Made with</span>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
Expand Down
30 changes: 30 additions & 0 deletions content/.vitepress/theme/components/GithubCounterBtn.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<script lang="ts" setup>
import { useData } from 'vitepress';
import GithubButton from 'vue-github-button';
const { isDark } = useData()
console.log('theme :>> ', isDark.value);
</script>

<template>
<div class="widget">
<!-- Place this tag where you want the button to render. -->
<github-button href="https://github.com/themeselection/vue-cheatsheet"
:data-color-scheme="`no-preference: ${isDark ? 'dark' : 'light'};light: ${isDark ? 'dark' : 'light'} ; dark: ${isDark ? 'dark' : 'light'}`"
data-icon="octicon-star" data-size="large" data-show-count="true"
aria-label="Star themeselection/vue-cheatsheet on GitHub">Star</github-button>
</div>
</template>

<style lang="scss">
.widget {
display: block;
margin-inline-start: 0.75rem;
margin-block-start: 0.375rem;
.social-count {
display: none;
}
}
</style>
12 changes: 0 additions & 12 deletions content/.vitepress/theme/components/SiteTitle.vue

This file was deleted.

11 changes: 6 additions & 5 deletions content/.vitepress/theme/components/SocialLinks.vue
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

<template>
<div class="flex items-center gap-3">
<a target="_blank" rel="noreferrer" href="https://github.com/themeselection"
<a target="_blank" rel="noreferrer" href="https://github.com/themeselection" alt="ThemeSelection GitHub"
class="hover:text-[var(--vp-c-brand-1)]">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
Expand All @@ -15,21 +15,21 @@
</g>
</svg>
</a>
<a target="_blank" rel="noreferrer" href="https://twitter.com/Theme_Selection"
<a target="_blank" rel="noreferrer" href="https://twitter.com/Theme_Selection" alt="ThemeSelection Twitter"
class="hover:text-[var(--vp-c-brand-1)]">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
d="M23 3.01s-2.018 1.192-3.14 1.53a4.48 4.48 0 0 0-7.86 3v1a10.66 10.66 0 0 1-9-4.53s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5c0-.278-.028-.556-.08-.83C21.94 5.674 23 3.01 23 3.01" />
</svg>
</a>
<a target="_blank" rel="noreferrer" href="https://www.facebook.com/ThemeSelections/"
<a target="_blank" rel="noreferrer" href="https://www.facebook.com/ThemeSelections/" alt="ThemeSelection Facebook"
class="hover:text-[var(--vp-c-brand-1)]">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
d="M17 2h-3a5 5 0 0 0-5 5v3H6v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" />
</svg>
</a>
<a target="_blank" rel="noreferrer" href="https://dribbble.com/themeselection/"
<a target="_blank" rel="noreferrer" href="https://dribbble.com/themeselection/" alt="ThemeSelection Dribbble"
class="hover:text-[var(--vp-c-brand-1)]">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
Expand All @@ -39,4 +39,5 @@
</g>
</svg>
</a>
</div></template>
</div>
</template>
14 changes: 14 additions & 0 deletions content/.vitepress/theme/components/SubscribeAlert.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<script lang="ts" setup>
import { ref } from 'vue';
const isSuccess = ref()
const params = new URLSearchParams(window.location.search)
isSuccess.value = params.get('success') === 'success'
</script>

<template>
<div class="mb-16 px-8 py-3 bg-emerald-500 text-white font-medium dark:bg-emerald-600 mb-12" v-if="isSuccess">
<p class="text-center">You have successfully subscribed to our newsletter
</p>
</div>
</template>
4 changes: 3 additions & 1 deletion content/.vitepress/theme/components/VueThemesCallOut.vue
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@

<template>
<div class="mb-16 px-8 py-6 bg-gray-100 dark:bg-zinc-800 mb-12 text-center">
<p>✨&nbsp; Supercharge your development process with our <a href="https://themeselection.com/item/category/vuejs-admin-templates/" rel="noreferrer" target="_blank" class="text-green-600 dark:text-green-300 font-medium hover:underline">free & premium Vue.js admin templates</a></p>
<p>✨&nbsp; Supercharge your development process with our free & premium <a
href="https://themeselection.com/item/category/vuejs-admin-templates/" rel="noreferrer" target="_blank"
class="text-green-600 dark:text-green-300 font-medium hover:underline">Vue js admin templates</a></p>
</div>
</template>
16 changes: 11 additions & 5 deletions content/.vitepress/theme/custom.scss
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@

.VPHero {
&.VPHomeHero {
margin-top: 3.5rem;
margin-top: 1.25rem;
margin-bottom: 2.25rem;
}
}
Expand Down Expand Up @@ -46,7 +46,6 @@
}
}


/* Style home logo */
.VPContent.is-home .VPHomeHero .VPImage {
width: 100%;
Expand All @@ -64,9 +63,16 @@
button.DocSearch-Button {
background-color: var(--vp-c-bg-alt);
}

.VPHero {
&.VPHomeHero {
margin-top: 3.5rem;
margin-bottom: 2.25rem;
}
}
}

// Enable below after: https://github.com/vuejs/vitepress/pull/3522
// .VPNav:has(~ .is-home) .title > span {
// display: none;
// }
.VPNav:has(~ .is-home) .title > span {
display: none;
}
8 changes: 6 additions & 2 deletions content/.vitepress/theme/index.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import DefaultTheme from 'vitepress/theme';
import { h } from 'vue';
import ActionButtons from './components/ActionButtons.vue';
import DocFooter from './components/DocFooter.vue';
import SiteTitle from './components/SiteTitle.vue';
import GithubCounterBtn from './components/GithubCounterBtn.vue';
import SubscribeAlert from './components/SubscribeAlert.vue';
import HomeVueThemesCallOut from './components/VueThemesCallOut.vue';
import './custom.scss';
import './tailwind.css';
Expand All @@ -12,7 +14,9 @@ export default {
return h(DefaultTheme.Layout, null, {
'home-features-before': h(HomeVueThemesCallOut),
'doc-after': h(DocFooter),
'nav-bar-title-after': h(SiteTitle),
'home-hero-before': h(SubscribeAlert),
'home-hero-actions-after': h(ActionButtons),
'nav-bar-content-after': h(GithubCounterBtn),
})
}
}
2 changes: 1 addition & 1 deletion content/contributing.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

Great! We appreciate your willingness to contribute!

The following are some guidelines for contributing to the Python cheatsheet. These guidelines are meant to provide direction, but they are not strict rules. Please use your own judgment, and feel free to suggest changes to [this document](https://github.com/themeselection/vue-cheatsheet/blob/master/src/pages/contributing.md).
The following are some guidelines for contributing to the Vue cheatsheet. These guidelines are meant to provide direction, but they are not strict rules. Please use your own judgment, and feel free to suggest changes to [this document](https://github.com/themeselection/vue-cheatsheet/blob/master/src/pages/contributing.md).

## Running the project locally

Expand Down
16 changes: 6 additions & 10 deletions content/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,32 +4,28 @@ layout: home

hero:
name: "Vue Cheatsheet"
tagline: The only Vue cheatsheet you will ever need
tagline: The only VueJS cheatsheet you will ever need
image:
src: /hero-image.png
alt: Vue Cheatsheet
actions:
- theme: brand
text: Let's Start
link: /vue/basic
- theme: alt
text: Other Free Resources
link: https://themeselection.com/item/category/freebies/

features:
- title: Vue
icon:
src: /vue-logo.png
details: Accelerate your vue learning & improve your skills with our comprehensive cheatsheet
alt: 'Vue'
details: Accelerate your vue learning & improve your skills with our comprehensive Vue 3 cheatsheet.
link: /vue/basic
- title: Vue Router
icon:
src: /vue-router-logo.png
alt: 'Vue Router'
details: Your Simple Guide to Vue Router, Making Routes as Easy as Following a Map.
link: /vue-router/basic
- title: Pinia
icon:
src: /pinia-logo.png
details: Your Cheatsheet for Pinia, Perfect for Vue Beginners and Beyond.
alt: 'Pinia'
details: Your vue js cheatsheet for Pina, perfect for vue beginners and beyond.
link: /pinia/basic
---
1 change: 1 addition & 0 deletions content/public/google6f658ffc1e5996cb.html
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
google-site-verification: google6f658ffc1e5996cb.html
2 changes: 2 additions & 0 deletions content/public/robots.txt
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
User-agent: *
Disallow:
49 changes: 49 additions & 0 deletions content/vue-router/advanced.md
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,28 @@ They are primarily used to guard navigations either by redirecting it or canceli
11. DOM updates triggered.
12. Call callbacks passed to `next` in `beforeRouteEnter` guards with instantiated instances.

Every guard function receives two arguments:

`to`: the target route location in a normalized format being navigated to.

`from`: the current route location in a normalized format being navigated away from.

## RouterView slot

The RouterView component exposes a slot that can be used to render the route component

```vue
<template>
<router-view v-slot="{ Component }">
<transition>
<keep-alive>
<component :is="Component" :some-prop="prop"/>
</keep-alive>
</transition>
</router-view>
</template>
```

## Transitions

```vue
Expand Down Expand Up @@ -90,3 +112,30 @@ const routes = [
</RouterView>
</template>
```

## Route Meta fields

Attach arbitrary information to routes like: transition names, or roles to control who can access the route, etc.

```js
const routes = [
{
path: '/posts',
component: PostsLayout,
children: [
{
path: 'new',
component: PostsNew,
// only authenticated users can create posts
meta: { requiresAuth: true },
},
{
path: ':id',
component: PostsDetail,
// anybody can read a post
meta: { requiresAuth: false },
},
],
},
]
```
Loading

0 comments on commit d36c2dc

Please sign in to comment.