Vue Cheatsheet provides a comprehensive guide to improve your Vue.js skills. It includes information on Vue, Vue Router, and Pinia, along with free and premium Vue.js admin templates.
Features
Vue
Accelerate your Vue learning and improve your skills with a comprehensive Vue 3 cheatsheet.
Vue Router
Simple guide to Vue Router, making routes easy as following a map.
Pinia
Cheatsheet for Pinia, suitable for Vue beginners and beyond.
Directives
Vue provides built-in directives such as v-bind, v-model, v-for for dynamic behavior in templates. These directives help bind data, handle events, and manage display logic.
Event Handling
Use Vue's event handling to listen and respond to DOM events. Methods can be defined within the Vue instance to perform actions in response to user interactions.
Computed Properties
Vue computed properties are used to define properties that depend on other data properties. These are cached based on their dependencies, improving performance and efficiency.
Binding HTML Classes
Dynamic CSS classes can be applied to elements in Vue using v-bind:class. You can use an object or array syntax to toggle classes dynamically based on data properties.
Basic Route Setup
Explains how to set up a basic route in Vue Router with code examples. You define paths and associated components to enable navigation.
Programmatic Navigation
Shows how to navigate to different routes programmatically using JavaScript, useful for navigation on certain events.
Dynamic Routing
Covers how to set up dynamic routing, allowing paths with parameters that can be used in components, providing flexibility to render different views based on the route.
Catch-All 404 Route
Demonstrates how to set up a catch-all route for handling 404 pages, ensuring users are informed when they navigate to a non-existent path.
Router Matching Syntax
Details the syntax options for matching routes, including wildcards and parameterized paths to allow for complex route setups.
Router Views
Describes how to use the <router-view> component in your application to render matched components based on the current route.
Redirects
Explains how to configure redirects in Vue Router, ensuring users are sent to the correct route when needed.
Named Views
Illustrates how to use named views to render multiple views within one route, offering additional layout flexibility.
Diving Deeper to Match Components
Discusses advanced matching techniques to render components conditionally, useful for dynamically controlling what components are displayed based on route parameters.
Define Store
Create a store with 'defineStore'. This is where the state, getters, and actions are declared for a specific store.
Direct Store Access
Using 'setup()' to access store properties and methods directly in a Vue component.
Accessing State
Access state using 'store' reference inside a component's 'setup()' method.
Using the Store
Import and use the developed store in Vue components to manage state more effectively.
Watching State
Watch store state changes using 'watch()' to react to state updates.
Replacing the State
Replace the store state directly by assigning a new state object.
Store Plugins
Add plugins to stores for additional features like persistence or logging.
Computed Properties / Getters
Use getters to compute derived state from the store state.
Accessing Getters
Use store reference to access computed properties directly.
Accessing Other Stores' Getters
Combine getters from multiple stores for integrated state management.
Accessing Other Stores' Getters Safely
Safely access getters from other stores using defensive coding practices.
Actions / Methods
Define actions to perform logic or asynchronous operations that need to access or modify state.
Accessing Actions
Utilize the store reference to invoke actions directly from within components.
Accessing Actions from Other Stores
Access and call actions from different stores to maintain complex state operations across stores.
Local Project Setup
Instructions to run the project locally using pnpm or npm/yarn, clone the repo, install dependencies, create a new branch, make changes, and commit them.
Contribution Guidelines
Guidance on how users can contribute by submitting changes, improving topics, and suggesting new resources.
ref()
Creates a reactive reference for a value. This reference can then be used in templates and expressions to update when the value changes.
reactive()
Takes an object and returns a reactive copy of it. Changes on the copied object will automatically update bindings or computed properties using it.
isRef/unRef
Checks if a value is a ref object using isRef() and returns unwrapped value using unRef() if it is a ref.
Computed Property
Allows you to create reactive properties derived from other properties. Computed properties automatically update when their dependencies change.
Class and Style Bindings
Includes dynamic bindings for classes and styles in Vue components. Allows styling elements based on reactive data.
Events
Create events in Vue components and templates, allowing interactivity through handling different user interactions.
Watchers
Allows you to perform side effects in response to data changes, often used to run asynchronous operations or compute derived properties.
WatchEffect()
Automatically reruns a function whenever reactive dependencies are triggered. Useful for initializing effects based on other reactive data.
Utilities
Includes helper functions like toRef(), shallowReadonly(), etc., to manipulate and work with reactive data structures efficiently.
Text Input Binding
Uses a v-model directive to bind text input to data property, allowing two-way data binding.
Checkbox Binding
Demonstrates v-model usage with checkbox input to manage boolean data.
Multiple Checkbox Binding
Shows how to use v-model with checkboxes for selecting multiple options, binding to an array.
Radio Button Binding
Illustrates radio button usage with v-model for selecting one of many predefined options.
Select Binding
Demonstrates usage of v-model with a select dropdown for single selections.
Multi Select Binding
Shows how to bind a select element with multiple attribute to an array for multiple selections.
Lifecycle Hooks
Shows how to use Vue.js lifecycle hooks for various stages in the component's life like beforeCreate, created, etc.
Component Registration
Explains how to locally and globally register Vue components.
Props
Demonstrates the use of props for passing data from parent to child components.
Slots
Illustrates how to use slots for content distribution in Vue components.
Event Handling
Shows how to emit events from child components to parent components.
Ref
Shows how to reference DOM elements or child components using Vue refs.
Composable Functions
Composable functions leverage Vue's Composition API to encapsulate and reuse stateful logic. They allow encapsulating state and managing it within the function.
Naming Conventions
It's a convention to name composable functions using camelCase starting with 'use', e.g., useMouse().
Lifecycle Hooks
Composables can hook into the component's lifecycle using onMounted and onUnmounted to set up and cleanup side effects.
Input Arguments Handling
Composables can accept parameters and manage them, as shown with useFeature. This function uses 'toValue' to handle refs or getters.
Transition
Enables you to apply enter and leave animations on elements or components. It can be used by wrapping elements in a `<transition>` tag, allowing smoother transitions when elements are added or removed from the DOM.
Using JavaScript Hooks in Transition
Allows you to hook into different stages of a transition lifecycle using `@before-enter`, `@enter`, `@after-enter`, `@before-leave`, `@leave`, and `@after-leave` hooks. This granular control lets you execute specific code during each stage of transition.
Transition Group
Designed for animating lists like entering and leaving of items. Elements are wrapped in a `<transition-group>` tag, allowing you to apply CSS transitions to multiple elements in a list dynamically.
KeepAlive
Used to conditionally cache component instances when dynamically switching between multiple components. This improves performance by saving component state between re-renders.
Teleport
This component allows you to render a component's HTML in a different part of the DOM. For example, a modal dialog box can be moved to the end of the document, improving separation of concerns.
Suspense
Handles asynchronous dependencies in components. By wrapping content in a `<suspense>` tag, you can manage how fallback states are displayed while awaiting multiple async dependencies to resolve.
Scroll Behavior
Allows scrolling to the top on a new route or maintaining the scroll position like a page reload. This is achieved using the `scrollBehavior` function in the router configuration.
Navigation Guards & Navigation Flow
Provides an ordered flow for handling navigation guards that allow or deny route navigation, with various lifecycle hooks such as `beforeRouteEnter` and `beforeRouteLeave`.
RouterView Slot
Allows the use of the `RouterView` component as a slot to dynamically render the component that corresponds to the route.
Transitions
Enables transition effects for route navigation, using `<transition>` wrappers around components in the `RouterView` slot.
Per-Route Transition
Allows different transitions to be applied to different routes by specifying transition names in the route's meta field.
Route Meta Fields
Adds arbitrary information to routes, such as transition names or roles for controlling access to the routes.